页面底部的JavaScript

JavaScript on the bottom of the page?

本文关键字：JavaScript 底部      更新时间：2023-09-26

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

而且似乎被广泛使用。

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

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

当你在头中加载脚本时，它们会阻止其他下载！这包括你的造型，也将停止你的图像下载，直到脚本完成。

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

还要注意，如果您不将JavaScript文件移动到页面底部，则在加载过程中会出现未格式化内容（FOUT）。这是因为在脚本加载完成之前，CSS不会下载。

以下是雅虎业绩规则6的摘录。

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

参考

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

特别要注意规则6。

我们最近在办公室进行了这场辩论。我写了一篇很长的文章，阐述了我对这个问题的看法。简单的回答是，这实际上取决于你在做什么。对于面向内容的网页，底部放置似乎效果最好。然而，当创建以功能为主的web应用程序时，将其放在顶部有其优势。

JavaScripts同步加载。将其与通常较大的文件大小配对，就会发现由于同步JavaScript加载而导致加载延迟的内容。如果你把JavaScripts放在页面的底部，那么其他的东西都会先加载，JavaScript加载不会阻塞任何东西。

基本上，当浏览器命中<script>标记时，它会停止加载文档的其余部分，直到加载并执行该<script>。

相关文章：