javascript - 为什么 JS 脚本通常放在文档的头部？

Question

为什么 JS 脚本通常放在文档的头部？它是标准要求的，还是只是没有特殊原因的约定？

Answer 1

请参阅http://developer.yahoo.com/performance/rules.html#js_bottom

尽管过去的做法是为了集中脚本和样式（等等）而经常将它们放在标题中，但现在建议将脚本放在底部以提高页面其余部分的加载速度。

去引用：

脚本引起的问题是它们会阻止并行下载。HTTP/1.1 规范建议浏览器每个主机名并行下载不超过两个组件。如果您从多个主机名提供图像，则可以同时进行两次以上的下载。但是，在下载脚本时，浏览器不会启动任何其他下载，即使在不同的主机名上也是如此。

在某些情况下，将脚本移到底部并不容易。例如，如果脚本使用 document.write 插入部分页面内容，则不能将其移至页面下方。也可能存在范围问题。在许多情况下，有一些方法可以解决这些情况。

经常出现的另一种建议是使用延迟脚本。DEFER 属性指示脚本不包含 document.write，并且是浏览器可以继续呈现的线索。不幸的是，Firefox 不支持 DEFER 属性。在 Internet Explorer 中，脚本可能会被延迟，但不会像期望的那样延迟。如果可以推迟脚本，也可以将其移至页面底部。这将使您的网页加载速度更快。

Answer 2

A<script src="url"></script>将阻止其他页面组件的下载，直到脚本被获取、编译和执行。最好尽可能晚地调用脚本，这样图像和其他组件的加载就不会延迟。

这取决于脚本在做什么。如果您的代码包含在 onLoad 事件中，那么这无关紧要，因为它几乎会立即返回并且不会阻塞，否则您应该将其放在合适的位置，因为放置确实很重要。

至于把它放在最后，它确实给了用户一点额外的时间来开始查看页面。问问自己一个问题——我的网站可以在没有 javascript 的情况下工作吗？如果没有，那么在我看来，你把它放在哪里并不重要，因为 onLoad 代码只会在 DOM 完全加载时执行（包括图像等二进制内容）。如果您可以在没有 javascript 的情况下使用它，请将其放在最后，以便图像可以更快地加载。

另请注意，大多数 JS 库使用特殊代码来解决 onLoad 问题，并为此使用自定义事件，一旦 DOM 加载并且不等待二进制数据，该事件就会被触发。

现在我写了所有这些，我有一个自己的问题。是否使用说 jQuery 的

$(document).ready(function () {}); 

并将脚本标记放在页面末尾与使用 onLoad 事件并将其放在开头相同吗？它应该是相同的，因为浏览器会在加载列表中最后一个脚本之前加载所有图像。如果您知道答案，请发表评论（我太懒了，现在测试它为时已晚）。

Answer 3

这只是一个约定。通常建议将脚本放在正文的末尾，以便页面可以在加载它们之前显示，这始终是一个优点。此外，document.body在加载文档或将脚本放入正文之前不能使用。