Unobtrusive JavaScript:HTML代码顶部或底部的<script>?

我最近阅读了雅虎声明加快您的网站的最佳实践。 他们建议尽可能将JavaScript包含在HTML代码的底部。

但是,究竟在哪里?

我们应该在结束</html>还是之后? 最重要的是,我们应该何时将它放入<head>部分?


真正不显眼的脚本有两种可能性:

  • 包括通过head部分中的脚本标记的外部脚本文件
  • 包括通过主体底部的脚本标签(在</body></html> )的外部脚本文件)
  • 第二个可能会更快,因为原始的雅虎研究显示,有些浏览器在脚本标记打开时尝试加载脚本文件,因此在完成之前不会加载页面的其余部分。 然而,如果你的脚本有一个“准备好”的部分,只要DOM准备就绪就必须执行,你可能需要把它放在头上。 另一个问题是布局 - 如果您的脚本要尽快更改所需的页面布局,那么您的页面不会花费很长时间在用户面前重新绘制自己。

    如果外部脚本网站位于另一个域(如外部窗口小部件),则可能需要将其放在底部以避免延迟加载页面。

    对于任何性能问题,请自己做基准测试 - 一次研究完成时可能会出现的情况可能会随着您本地设置或浏览器更改而改变。


    它永远不会被切断和干涸 - 雅虎建议在关闭</body>标记之前放置脚本,这会产生页面在空缓存上加载速度更快的错觉(因为脚本不会阻止下载文档的其余部分)。 但是,如果您有一些代码需要在页面加载时运行,则只有在整个页面加载后才会开始执行代码。 如果将脚本放在<head>标记中,它们将在以前开始执行 - 因此在引导缓存中页面实际上会加载得更快。

    另外,将脚本放在页面底部的权限并不总是可用的。 如果您需要在您的视图中包含内联脚本,而这些内联脚本依赖于之前加载的库或其他JavaScript代码,则必须将这些依赖关系加载到<head>标记中。

    总而言之,雅虎的建议很有趣,但并不总是适用,应该根据具体情况加以考虑。


    正如其他人所说,把它放在关闭body html标签之前。

    有一天,我们有很多来自客户的电话抱怨他们的网站非常缓慢。 我们在本地访问了他们,​​发现他们花了20-30秒来加载单个页面。 认为服务器性能不好,我们登录了 - 但web和sql服务器都是〜0%的活动。

    几分钟后,我们意识到外部网站已关闭,我们将其链接到Javascript跟踪代码。 这意味着浏览器正在点击网站头部的脚本标签并等待下载脚本文件。

    因此,至少对于第三方/外部脚本,我建议将它们作为页面上的最后一件事。 然后,如果它们不可用,那么浏览器至少会将页面加载到该点 - 并且用户会忘记它。

    链接地址: http://www.djcxy.com/p/71517.html

    上一篇: Unobtrusive JavaScript: <script> at the top or the bottom of the HTML code?

    下一篇: Why does the call to this jQuery function fail in Firefox?