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

发布于 2024-08-08 08:03:39 字数 45 浏览 5 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

狼性发作 2024-08-15 08:03:39

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

虽然过去的做法通常是将它们放在页眉中，以便集中脚本和样式（等），但现在建议将脚本放在底部，以提高页面其余部分的加载速度。

引用：

脚本引起的问题是它们会阻止并行下载。 HTTP/1.1 规范建议浏览器为每个主机名并行下载不超过两个组件。如果您从多个主机名提供图像，则可以并行进行两次以上的下载。然而，当下载脚本时，浏览器不会启动任何其他下载，即使在不同的主机名上也是如此。
在某些情况下，将脚本移至底部并不容易。例如，如果脚本使用 document.write 插入页面的部分内容，则无法将其移至页面的下方。还可能存在范围界定问题。在许多情况下，有多种方法可以解决这些情况。
经常出现的另一个建议是使用延迟脚本。 DEFER 属性表明脚本不包含 document.write，并且是浏览器可以继续渲染的线索。不幸的是，Firefox 不支持 DEFER 属性。在 Internet Explorer 中，脚本可能会延迟，但不会延迟到预期的程度。如果脚本可以推迟，则也可以将其移动到页面底部。这将使您的网页加载速度更快。

回复收藏 0 原文

我喜欢麦丽素 2024-08-15 08:03:39

将
阻止其他页面的下载
组件，直到脚本被
获取、编译和执行。这是
最好还是晚点调用脚本
尽可能地，以便加载
图像和其他组件不会
延迟。

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

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

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

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

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

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

A <script src="url"></script> will
block the downloading of other page
components until the script has been
fetched, compiled, and executed. It is
better to call for the script as late
as possible, so that the loading of
images and other components will not
be delayed.

It depends on what the script is doing. If your code is wrapped in onLoad event then it doesn't matter since it will return almost immediately and not block otherwise you should put it where it fits because the placement does matter.

As for putting it at the end, it does give a little extra time for user to start looking at the page. Just ask yourself a question - does my site work without javascript? If it doesn't, then in my opinion it doesn't mater where you put it since onLoad code will only be executed when the DOM has been fully loaded (that includes binary content like images). If you can use it without javascript then put it at the end so that images can load faster.

Also note that most JS libraries use special code which works around the onLoad problem and uses custom event for this which gets fired once DOM has loaded and doesn't wait for binary data.

Now that I wrote all that, I got a question of my own. Does using say jQuery's

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

and putting the script tag at the end of page is the same as using onLoad event and putting it at the start?
It should be the same because browser would load all images before loading the script which is the last one in the list. If you know the answer leave a comment (I'm too lazy and it's too late to test it atm).

回复收藏 0 原文