Question

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

<html>
  <head>
    <title>Template</title>
    <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>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

VS

<html>
  <head>
    <title>Template</title>
    <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>
    <script src="js/bootstrap.min.js"></script>
  </head>
  <body>
    <!-- The main HTML will go here -->
  </body>
</html>

Answer 1

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

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

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

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

验证：以下是Google的推荐：https://developers.google.com/apps-script/guides/html/best-practices#load_javascript_last

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

Answer 2

是 /否

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

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

以下是：

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

为什么？

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

替代：

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

JavaScript应该进入性能，而不是？

2 个答案:

是 /否

以下是：

参考文献：