可能重复:
将JS文件放在网页底部实际上好吗?
我见过开发人员将<script src="xxx">
标签放在文档底部的 HTML 文档,我想知道为什么。
我刚刚阅读了有关script 标签的 HTML4 规范。它没有说明何时以及如何加载脚本。因此,由网络浏览器来处理它认为合适的事情。
认为浏览器作者应该意识到同步加载脚本或以任何其他方式阻碍文档呈现会影响浏览体验是否合理?
即,我们作为 Web 开发人员不是最好将脚本放在<head>
标签中吗?
可能重复:
将JS文件放在网页底部实际上好吗?
我见过开发人员将<script src="xxx">
标签放在文档底部的 HTML 文档,我想知道为什么。
我刚刚阅读了有关script 标签的 HTML4 规范。它没有说明何时以及如何加载脚本。因此,由网络浏览器来处理它认为合适的事情。
认为浏览器作者应该意识到同步加载脚本或以任何其他方式阻碍文档呈现会影响浏览体验是否合理?
即,我们作为 Web 开发人员不是最好将脚本放在<head>
标签中吗?
将脚本标签放在文档顶部会阻止页面其余部分的加载;横幅广告脚本尤其如此。如果第三方脚本的加载时间过长,那么之后的任何 DOM 元素都会被延迟,从而导致页面出现空白/格式错误,直到请求超时或最终加载内容。
脚本需要解释(可能相对昂贵),并且可能需要通过另一个 HTTP 请求进行检索。将它们放在文档的末尾允许首先加载页面的其余部分。
在浏览器继续解析页面之前,会立即获取并执行没有 async 或 defer 属性的脚本。
https://developer.mozilla.org/en-US/docs/HTML/Element/script
另请参阅http://dev.w3.org/html5/spec/the-script-element.html,特别是详细介绍的准备/阻塞区域。请注意,这是一个不断变化的编辑草稿;其中一些规则可能不在最终规范中或由所有用户代理强制执行。
作为旁注,这种阻塞行为不是坏的/错误的。想想像Modernizr这样的库,它确实属于head
. 它以允许正确应用 CSS 的方式更改 DOM;如果它并行执行,结果将不正确。
JS 脚本在页面加载时执行。如果它位于页面顶部,则页面的其余部分在运行时不会加载,这意味着它将无法访问页面中的任何元素。
如果脚本需要时间来运行(例如,它有一个缓慢的循环,或者抛出一个alert()
盒子,或者做任何其他阻止执行的事情),那么页面加载的其余部分将被延迟,直到它完成。如果脚本在 中<head>
,这可能会导致用户在脚本执行此操作时看到空白页。
这样,文档将在 JavaScript 代码启动之前完全显示。如果脚本需要时间或不起作用或无法访问,它不会让用户坐在空白页面前。
此外,在 body 元素完全加载之前执行 DOM 操作可能会产生错误 IE。