JavaScript 在页面底部？

IT技术 javascript jquery html html5boilerplate
2021-02-17 19:14:15

我读过最好将所有 JavaScript 文件保存在网页底部。HTML5 Boilerplate 模板似乎同意：http ://html5boilerplate.com/

并且似乎被广泛使用。

我的问题是：首先，这有什么实际依据吗？我已经在 Firebug 中进行了测试，它似乎有一些小影响，但它是微不足道的吗？在加载 CSS 文件和脚本文件之前，图像和其他来源似乎不会开始加载，但将它们粘贴在底部似乎根本没有太大区别。

4个回答

出于最佳实践的原因，这非常重要。

当您在标题中加载脚本时，它们会阻止其他下载发生！这包括您的样式，并且还将阻止您的图像下载，直到脚本完成。

这是因为 JavaScript 文件是同步加载的。

另请注意，如果您不将 JavaScript 文件移动到页面底部，您将在加载过程中看到一闪而过的无样式内容 (FOUT)。这是因为在脚本完成加载之前您的 CSS 不会下载。

这是雅虎性能规则 6 的摘录。

脚本引起的第二个问题是阻止并行下载。HTTP/1.1 规范建议浏览器每个主机名并行下载的组件不超过两个。如果您从多个主机名提供图像，则可以同时进行两次以上的下载。（我已经让 Internet Explorer 并行下载 100 多个图像。）然而，在下载脚本时，浏览器不会启动任何其他下载，即使是在不同的主机名上。

参考

http://developer.yahoo.com/performance/rules.html/

特别注意规则 6。

请注意，也有例外。一些脚本需要首先执行并且需要在页面顶部。Modernizr.js 就是其中之一。不知道为什么。
2021-04-16 19:14:15
Modernizr 必须在头部加载，因为在它进行特征检测后，它会向 body 元素添加类，以便您可以根据某些特征是否可用来分叉 CSS。您希望尽快添加这些类，以便您的 CSS 在内容加载时采用正确的形式。
2021-04-20 19:14:15
如果我们在 css link 标签之后添加 Script 标签，但仍然在头上，那还会有问题吗？因为这就是我使用它的方式，所以我使用window.onload事件开始执行js，它仅在页面完全加载后才执行并且不会出现任何未找到元素的错误。对我来说很好用。
2021-04-23 19:14:15
@underbar 感谢您的提醒，我的回答中包含这一点
2021-05-10 19:14:15

我们最近在办公室进行了这场辩论。我写了一篇很长的文章，在此发表我对这个主题的看法。简短的回答是，这真的取决于你在做什么。对于面向内容的网页，底部放置似乎效果最好。但是，当创建以功能为主要优先事项的 Web 应用程序时，放置在顶部具有其优势。

+1 我在这个主题上看到的所有回复、博客和意见几乎一遍又一遍地重复了相同的 3 个事实。你是第一个给出真实世界“取决于你在做什么”的人。做得好。
2021-04-28 19:14:15

JavaScript 同步加载。将它与通常较大的文件大小配对，并且由于同步 JavaScript 加载，您的内容加载延迟。如果您将 JavaScript 放在页面底部，那么其他所有内容都会首先加载，并且 JavaScript 加载无法阻止任何内容。

基本上，当浏览器点击一个<script>标签时，它会停止加载文档的其余部分，直到<script>加载并执行为止。

其它你可能感兴趣的问题
上一篇在 JavaScript 中触发选项卡按键事件？ 下一篇IE8/9 中的表单数据