关于html：JavaScript应该进入以获得性能，而不是？


Should JavaScript go inside the for performance, rather than the ?

本问题已经有最佳答案，请猛点这里访问。

一个谈论快速Web开发的IBM网站提到了一个有用的骨架HTML。 在模板中，脚本包含在body中而不是head中。 这是一个好习惯吗？ 将任何库放在头部不是更好吗？

1
2
3
4
5
6
7
8
9
10
11
12
<html>
  <head>
    Template
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
  </head>
  <body>
    <!-- The main HTML will go here -->
    <script src="http://code.jquery.com/jquery.js">
    <script src="js/bootstrap.min.js">
  </body>
</html>

VS

1
2
3
4
5
6
7
8
9
10
11
12
<html>
  <head>
    Template
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery.js">
    <script src="js/bootstrap.min.js">
  </head>
  <body>
    <!-- The main HTML will go here -->
  </body>
</html>
相关讨论

现在，标准是在关闭body标记之前包含脚本标记，以便脚本加载不会阻止页面加载的其余部分。

1
2
  <script src="myScript.js">
</body>

有了这个，用户将不必等待在页面上看到某些内容，然后添加javascript功能。

但是，有越来越多的网站和"网络应用程序"javascript / ajax很重，可能需要在页面上显示任何内容之前加载脚本。这种情况不太常见，但是这种情况可以将脚本包含在任一位置，因为如果javascript负责创建/加载内容，则视觉结果将是相同的。

要验证：以下是Google的建议：https：//developers.google.com/apps-script/guides/html/best-practices#load_javascript_last

还要考虑从CDN加载库，以便您可以利用浏览器缓存。

是 /否

是的，这是一个很好的做法，因为如果代码在结尾，页面将加载更快...

它等待整个页面加载，然后加载脚本。

这是如何做：

我访问了这个网站，很快就响应了我的浏览器的请求。但当我收到回复时，它是一些带有一些盒子和一些文字的白页。加载页面需要很长时间。过了一段时间，一些图像出现在框中，文字得到了样式。

为什么？

当页面加载时脚本被放在头部。因此，脚本正在加载，图像和样式都在队列中。因此，当脚本加载时，我必须见证一个丑陋的页面。

替代方案：

如果脚本放在页面的末尾，就在标签之前，样式和图像的加载速度会更快，所以我不必看到一个丑陋的网站，然后页面就会加载。

参考文献：

  • http://developer.yahoo.com/performance/rules.html#js_bottom
  • http://stevesouders.com/docs/googleio-20080529.ppt
  • Google Analytics是否有性能开销？

  • Coupling asynchronous scripts