不显眼的JavaScript：HTML代码顶部或底部的<script>？
我最近阅读了雅虎宣传网站加速的最佳实践 。 他们build议尽可能将JavaScript包含在HTML代码的底部。
但是究竟在哪里？
我们应该在结束</html>还是之后？ 而最重要的是，我们应该什么时候把它放在<head>部分？
真正不显眼的脚本有两种可能性：
- 包括通过头部中的脚本标签的外部脚本文件
- 包括通过主体底部的脚本标记（在
</body></html>）的外部脚本文件
第二个可能会更快，因为雅虎最初的研究显示，一些浏览器在脚本标签上尝试加载脚本文件，因此在完成之前不会加载页面的其余部分。 然而，如果你的脚本有一个“准备就绪”的部分，只要DOM准备就绪就必须执行，你可能需要把它放在头上。 另一个问题是布局 – 如果您的脚本将尽快更改您希望加载的页面布局，那么您的页面不会花费很长时间在用户面前重新绘制。
如果外部脚本站点位于另一个域（如外部窗口小部件），则可能需要将其放在底部以避免延迟加载页面。
而对于任何性能问题，你自己的基准testing – 当一项研究完成的时候可能是真实的，可能会改变你自己的本地设置或浏览器的变化。
它永远不会被切断和干涸 – 雅虎build议在closures</body>标记之前放置脚本，这会造成页面在空闲caching中加载速度更快的错觉（因为脚本不会阻止下载文档的其余部分）。 但是，如果您有一些代码需要在页面加载时运行，那么只有在整个页面加载后才会开始执行代码。 如果你把这些脚本放在<head>标签中，它们会在之前开始执行 – 所以在一个准备好的caching中页面实际上会加载得更快。
另外，将脚本放在页面底部的权限并不总是可用的。 如果您需要在视图中包含内联脚本，而这些脚本依赖于之前加载的库或其他JavaScript代码，则必须将这些依赖关系加载到<head>标记中。
总而言之，雅虎的build议很有意思，但并不总是适用的，应该根据具体情况加以考虑。
正如其他人所说，把它放在closuresbody html标签之前。
有一天，我们有来自客户的众多电话，抱怨他们的网站非常缓慢。 我们在本地访问了他们，发现他们花了20-30秒来加载一个页面。 认为这是服务器performance不佳，我们login – 但networking和SQL服务器都是〜0％的活动。
几分钟后，我们意识到外部网站已closures，我们正在链接到Javascript跟踪代码。 这意味着浏览器正在点击网站头部的脚本标签，并等待下载脚本文件。
所以，至less对于第三方/外部脚本，我build议把它们作为页面上的最后一个东西。 然后，如果他们不可用，浏览器将至less加载页面，直到这一点 – 用户会忘记它。
总结一下，根据以上build议：
- 对于外部脚本（Google分析，第三方营销跟踪器等），请将它们放在
</body>标记之前。 - 对于影响页面布局的脚本，放在头部。
- 对于依赖“dom ready”的脚本（如jquery），除非你有边缘案例的理由将脚本放在头部，否则请考虑放置在
</body>之前。 - 如果有依赖关系的内联脚本，则将所需的脚本放在头部。
不，它不应该在</html>因为这将是无效的。 放置脚本的最佳位置就在</body>
这基本上是因为大多数浏览器在评估您提供的脚本时会停止渲染页面。 所以它可以把非阻塞代码放在页面的任何地方（我主要是想把事件附加到onLoad事件上，因为事件绑定是非常快的以至于无法实现）。 这里的一个大杀手是在页面的开始放置一些广告服务器脚本，这可以防止在广告完全下载之前加载任何页面，使得您的页面加载时间膨胀
如果你想修改你的脚本的位置，YSlow是一个很好的工具，如果它会改善或伤害性能，给你一个风味。 把JavaScript放在特定的文档位置可以真正杀死页面加载时间。
如果你把它放在最下面，它会加载最后，从而加快用户可以看到页面的速度。 它确实需要在最后</html>之前，否则它不会是DOM的一部分。
如果代码是需要立即，然后把它放在头上。
最好将博客小部件放在底部，这样，如果不加载，不会影响页面的可用性。
