为什么 JS 脚本通常放在文档的头部?它是标准要求的,还是只是没有特殊原因的约定?
3 回答
请参阅http://developer.yahoo.com/performance/rules.html#js_bottom
尽管过去的做法是为了集中脚本和样式(等等)而经常将它们放在标题中,但现在建议将脚本放在底部以提高页面其余部分的加载速度。
去引用:
脚本引起的问题是它们会阻止并行下载。HTTP/1.1 规范建议浏览器每个主机名并行下载不超过两个组件。如果您从多个主机名提供图像,则可以同时进行两次以上的下载。但是,在下载脚本时,浏览器不会启动任何其他下载,即使在不同的主机名上也是如此。
在某些情况下,将脚本移到底部并不容易。例如,如果脚本使用 document.write 插入部分页面内容,则不能将其移至页面下方。也可能存在范围问题。在许多情况下,有一些方法可以解决这些情况。
经常出现的另一种建议是使用延迟脚本。DEFER 属性指示脚本不包含 document.write,并且是浏览器可以继续呈现的线索。不幸的是,Firefox 不支持 DEFER 属性。在 Internet Explorer 中,脚本可能会被延迟,但不会像期望的那样延迟。如果可以推迟脚本,也可以将其移至页面底部。这将使您的网页加载速度更快。
A
<script src="url"></script>
将阻止其他页面组件的下载,直到脚本被获取、编译和执行。最好尽可能晚地调用脚本,这样图像和其他组件的加载就不会延迟。
这取决于脚本在做什么。如果您的代码包含在 onLoad 事件中,那么这无关紧要,因为它几乎会立即返回并且不会阻塞,否则您应该将其放在合适的位置,因为放置确实很重要。
至于把它放在最后,它确实给了用户一点额外的时间来开始查看页面。问问自己一个问题——我的网站可以在没有 javascript 的情况下工作吗?如果没有,那么在我看来,你把它放在哪里并不重要,因为 onLoad 代码只会在 DOM 完全加载时执行(包括图像等二进制内容)。如果您可以在没有 javascript 的情况下使用它,请将其放在最后,以便图像可以更快地加载。
另请注意,大多数 JS 库使用特殊代码来解决 onLoad 问题,并为此使用自定义事件,一旦 DOM 加载并且不等待二进制数据,该事件就会被触发。
现在我写了所有这些,我有一个自己的问题。是否使用说 jQuery 的
$(document).ready(function () {});
并将脚本标记放在页面末尾与使用 onLoad 事件并将其放在开头相同吗?它应该是相同的,因为浏览器会在加载列表中最后一个脚本之前加载所有图像。如果您知道答案,请发表评论(我太懒了,现在测试它为时已晚)。
这只是一个约定。通常建议将脚本放在正文的末尾,以便页面可以在加载它们之前显示,这始终是一个优点。此外,document.body
在加载文档或将脚本放入正文之前不能使用。