javascript - 为了性能，JavaScript 应该放在 <body> 中而不是 <head> 中吗？

<分区>

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

对比

<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>

最佳答案

在 body 标签结束之前包含脚本标签现在是标准的，这样脚本加载就不会阻塞页面其余部分的加载。

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

有了这个，用户将不必等待很长时间才能看到页面上的内容，然后添加 javascript 功能。

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

验证:这是谷歌的建议:https://developers.google.com/apps-script/guides/html/best-practices#load_javascript_last

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

关于javascript - 为了性能，JavaScript 应该放在 <body> 中而不是 <head> 中吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20794364/

上一篇：javascript - grunt 将散列附加到 dist/files

下一篇：用于与 IE8 兼容的 JavaScript Object.keys() 方法替代方案

html - 如何从 Selenium IDE 的下拉无序列表中选择一个元素

html - 提交时设置表单的 Action 属性？

html - 如何在中心对齐绝对定位图像？

html - 在线解析器自动从 HTML 中删除除条件语句之外的所有注释？

javascript - 可以使用变量的值作为函数名来调用函数吗？

javascript - 选择多个换行符正则表达式

Javascript如何在单击每个按钮后更改段落中的文本

javascript - 如何在javascript中从java bean获取属性值而不替换特殊字符

javascript - NEXT.js 同构-unfetch 出错