我最近阅读了雅虎宣言Best Practices for Speeding Up Your Web Site。他们建议尽可能将 JavaScript 包含在 HTML 代码的底部。
但是具体的时间和地点？
我们应该把它放在关闭</html> 之前还是之后？最重要的是，我们什么时候应该把它放在<head> 部分？
【问题讨论】：
标签： javascript performance optimization coding-style
真正不显眼的脚本有两种可能性：
</body></html> 之前）第二个可能更快，因为最初的 Yahoo 研究表明，一些浏览器在点击脚本标签时会尝试加载脚本文件，因此在完成之前不会加载页面的其余部分。但是，如果您的脚本有一个“就绪”部分必须在 DOM 准备好后立即执行，您可能需要将它放在头上。另一个问题是布局 - 如果您的脚本要更改页面布局，您希望它尽早加载，这样您的页面就不会花费很长时间在用户面前重绘自身。
如果外部脚本站点位于另一个域（如外部小部件）上，则可能值得将其放在底部以避免延迟页面加载。
对于任何性能问题做你自己的基准测试 - 当一项研究完成时可能会发生变化，这可能会随着你自己的本地设置或浏览器的变化而改变。
【讨论】：
它从未如此简单——雅虎建议将脚本放在结束 </body> 标记之前，这会产生页面在空缓存上加载速度更快的错觉（因为脚本不会阻止下载其余的文件）。
但是，如果您有一些代码要在页面加载时运行，它只会在整个页面加载后才开始执行。如果您将脚本放在<head> 标记中，它们将在之前开始执行 - 因此在准备好的缓存上，页面实际上看起来加载速度更快。
此外，将脚本放在页面底部的权限并不总是可用的。如果您需要在视图中包含依赖于之前加载的库或其他 JavaScript 代码的内联脚本，则必须在 <head> 标记中加载这些依赖项。
总而言之，雅虎的建议很有趣，但并不总是适用，应根据具体情况进行考虑。
【讨论】：
<script> 标签并不意味着突兀的 javascript。
<script> 标签与标记分开，可以与增强界面但不是必需的代码一起使用。因此，内联 <script> 标签本身并没有什么突兀的地方。
<script> 标签将这些值编码为 javascript 变量，以供使用具有内联编辑或其他类似行为。
正如其他人所说，将其放在结束 body html 标记之前。
前几天，我们接到许多客户的电话，抱怨他们的网站速度极慢。我们在本地访问了它们，发现它们需要 20-30 秒才能加载一个页面。认为是服务器性能不佳，我们登录了 - 但 web 和 sql 服务器的活动都约为 0%。
几分钟后，我们意识到一个外部网站已关闭，我们正在链接到该网站以获取 Javascript 跟踪标签。这意味着浏览器会点击站点 head 部分中的 script 标记并等待下载脚本文件。
因此，至少对于第 3 方/外部脚本，我建议将它们作为页面上的最后一件事。然后，如果它们不可用，浏览器至少会加载页面直到该点 - 而用户会忘记它。
【讨论】：
总结一下，根据上面的建议：
</body> 标记之前。</body> 之前，除非您有特殊情况需要将脚本放在 head 中。【讨论】：
如果您想修改脚本的位置，YSlow 是一个很好的工具，可以让您体验一下它是否会提高或损害性能。将 javascript 放在某些文档位置确实可以缩短页面加载时间。
【讨论】：
不，它不应该在</html> 之后，因为那将是无效的。放置脚本的最佳位置就在</body>之前
这基本上是因为大多数浏览器在评估您提供的脚本时会停止呈现页面。所以可以将非阻塞代码放在页面的任何位置（我主要考虑将函数附加到onLoad 事件的东西，因为事件绑定是如此之快以至于实际上是免费的）。这里的一个大杀手是在页面的开头放置一些广告服务器脚本，它可以在广告完全下载之前阻止任何页面加载，从而使您的页面加载时间膨胀
【讨论】：
如果你把它放在底部，它会最后加载，从而加快用户查看页面的速度。它确实需要在最终的 </html> 之前，否则它不会成为 DOM 的一部分。
如果代码是立即需要的，那么就把它放在头上。
最好将博客小部件之类的东西放在底部，这样如果它们不加载，也不会影响页面的可用性。
【讨论】：