我最近阅读了 Yahoo 宣言加速您的网站的最佳实践。他们建议尽可能将 JavaScript 包含放在 HTML 代码的底部。
但究竟在哪里，什么时候？
我们应该把它放在关闭之前</html>还是之后？最重要的是，我们什么时候还应该把它放在这个<head>部分？
Unobtrusive JavaScript: <script> 在 HTML 代码的顶部还是底部？
IT技术
javascript
performance
optimization
coding-style
2021-01-29 09:45:41
6个回答
真正不引人注目的脚本有两种可能性：
- 通过 head 部分中的脚本标记包含外部脚本文件
- 通过正文底部的脚本标记包含外部脚本文件（之前
</body></html>）
第二个可以更快，因为最初的雅虎研究表明，一些浏览器会在点击脚本标签时尝试加载脚本文件，因此在完成之前不会加载页面的其余部分。但是，如果您的脚本有一个“就绪”部分，它必须在 DOM 准备好后立即执行，您可能需要将它放在头中。另一个问题是布局 - 如果您的脚本要更改页面布局，您希望它尽早加载，这样您的页面就不会在用户面前花费很长时间重新绘制自己。
如果外部脚本站点位于另一个域（如外部小部件）上，则可能值得将其放在底部以避免延迟页面加载。
对于任何性能问题，请执行您自己的基准测试- 在完成一项研究后可能会发生的情况可能会随着您自己的本地设置或浏览器的变化而改变。
它从来没有这么简单——雅虎建议将脚本放在结束</body>标记之前，这会造成页面在空缓存上加载速度更快的错觉（因为脚本不会阻止下载文档的其余部分）。但是，如果您想在页面加载时运行一些代码，它只会在整个页面加载后才开始执行。如果您将脚本放在<head>标签中，它们将在之前开始执行 - 因此在准备好的缓存中，页面实际上看起来加载得更快。
此外，将脚本放在页面底部的特权并不总是可用。如果您需要在依赖于之前加载的库或某些其他 JavaScript 代码的视图中包含内联脚本，则必须在<head>标记中加载这些依赖项。
总而言之，雅虎的建议很有趣，但并不总是适用，应根据具体情况加以考虑。
正如其他人所说，将它放在结束正文 html标签之前。
前几天，我们接到了很多客户的电话，抱怨他们的网站速度非常慢。我们在本地访问了它们，发现它们需要 20-30 秒才能加载一个页面。认为是服务器性能不佳，我们登录了 - 但 web 和 sql 服务器都是 ~0% 的活动。
几分钟后，我们意识到一个外部站点已关闭，我们正在链接到该站点以获取 Javascript 跟踪标签。这意味着浏览器会点击站点头部的脚本标签并等待下载脚本文件。
因此，至少对于 3rd 方/外部脚本，我建议将它们作为页面上的最后一件事。然后，如果它们不可用，浏览器至少会在此之前加载页面 - 而用户将无视它。
总结一下，基于以上建议：
- 对于外部脚本（Google 分析、第 3 方营销跟踪器等），请将它们放在
</body>标签之前。 - 对于影响页面布局的脚本，放在 head 中。
- 对于依赖 'dom ready' 的脚本（如 jquery），请考虑放置 before，
</body>除非您有特殊情况需要将脚本放置在 head 中。 - 如果有依赖的内联脚本，将需要的脚本放在 head 中。
如果您想修改脚本的位置，YSlow 是一个很好的工具，可以让您了解它是否会提高或损害性能。将 javascript 放在某些文档位置确实可以缩短页面加载时间。