在<head>和<body>中插入.js有什么区别

Ku_Andrew
  • 536

有时候会接触到一些前端工作,插入js文件的时候 会遇到这样的问题
好像有的js放到head里面就失效了
想请教一下这是什么原理

回复
阅读 7.9k
2 个回答
n͛i͛g͛h͛t͛i͛r͛e͛
  • 31k
✓ 已被采纳

简单的说,放在 </body> 前面可以保证 HTML 标签先加载和解析,之后才是脚本。

一些脚本涉及到 DOM 操作的,能够有效的前提当然是要有对应的 DOM 对象。当你放在 <head> 标签里,这些脚本在 HTML 标签得以解析之前就执行了,此时没有对应的 DOM 对象可以操作,当然就失效了。

当然,这个问题可以通过监听 DOMContentLoaded 事件,然后把脚本放在事件回调函数里来解决。但是另外一个问题则是 HTTP 请求的优先级问题。脚本(特别是非本地脚本)放在 <head> 标签里,它会优先进行请求,这会阻塞一些 HTML 标签的请求,比如图片等外部资源的下载。这就是为什么我们通常会把脚本放在 load 事件的回调函数里执行的原因。

DOMContentLoadedload 的区别?

前者在文档载入并解析之后触发,但是不包括样式、图片等外部资源;后者则是等待所有的外部资源全部载入之后才触发。因此,你选择监听哪一个事件取决于你的脚本到底要操作什么。

然而不是所有的浏览器都支持 DOMContentLoaded 事件,这就是为什么最佳实践推荐把所有的脚本加载都放在 </body> 标签之前的缘故——保证向后兼容。

从确保内容加载并解析的角度考虑,优先级应该是:HTML > CSS > Javascript,CSS 要生效,前提是 HTML 已经提供了可供操作的选择符;Javascript 要生效,前提是浏览器解析了 HTML 并提供了 DOM 对象以及 CSS 声明已经存在(如果脚本的目的就是处理 HTML & CSS的话)。

参考我对另外一个问题的答案:
http://segmentfault.com/q/1010000000640869

将CSS文件放在<head></head>标签中,是为了防止在低网速的情况下,用户的IE浏览器只能看到空白页。

将<script>标签放在最下面。他会先将内容呈现出来,不会让用户等得太久。因为防止script脚本的执行阻塞页面的下载。在页面loading的过程中,当浏览器读到js执行语句的时候一定会把它全部解释完毕后在会接下来读下 面的内容。不信你可以写一个js死循环看看页面下面的东西还会不会出来。所以放在页面最后,可以有效减少页面可 视元素的加载时间

参考我的文章:http://blog.segmentfault.com/trigkit4/1190000000656717

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏