为什么JS脚本通常放在文档的头部?

这只是一个惯例。通常建议将脚本放在正文的末尾,以便在加载脚本之前显示页面,这始终是一个优点。也, document.body 在加载文档或将脚本放入正文之前无法使用。

见 http://developer.yahoo.com/performance/rules.html#js_bottom

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

引述:

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

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

另一个经常出现的建议是使用延迟脚本。defer属性表示脚本不包含document.write,它是浏览器可以继续呈现的提示。不幸的是,firefox不支持defer属性。在Internet Explorer中,脚本可能会被延迟,但不会达到所需的程度。如果脚本可以延迟,它也可以移动到页面的底部。这将使您的网页加载更快。

一 <script src="url"></script> 将 阻止下载其他页面 组件,直到脚本 获取、编译和执行。它是 最好迟点叫剧本 尽可能,以便 图像和其他组件不会 被耽搁。

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

至于把它放在末尾,它确实给了用户一点额外的时间来开始查看页面。问你自己一个问题-我的网站在没有javascript的情况下工作吗?如果没有,那么在我看来,它与您所放置的位置无关,因为OnLoad代码只在DOM完全加载(包括像图像这样的二进制内容)时执行。如果您可以在不使用JavaScript的情况下使用它,那么将它放在末尾,这样图像加载速度就更快了。

另外请注意,大多数JS库都使用特殊的代码来解决onload问题,并使用自定义事件来解决这个问题,当dom加载后,它就会被激发,并且不等待二进制数据。

既然我写了这些,我就有了自己的问题。使用say jquery的

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

将脚本标记放在页面末尾与使用onload事件并将其放在开始位置相同? 它应该是相同的,因为浏览器将在加载列表中最后一个脚本之前加载所有图像。如果你知道答案,请留下评论(我太懒了,太晚了,无法测试ATM)。