Question

在最近的一次采访中，我被问到以下问题：

最好放置CSS - 顶部，正面还是底部？最好放JS的地方 - 顶部，身体还是底部？

我只假设因为标准建议将这些元素放在head标签中（好吧，不包括内联CSS），这是最好的方法。但是，我的采访者告诉我，对于CSS - 这最好放在页面的顶部，因为它允许使用已经加载的CSS渲染HTML;并且JS放在页面底部，因为这只会在加载DOM后运行。它是否正确？有什么地方我可以阅读更多关于这个（以及其他未知的怪癖）吗？很好奇了解更多。感谢

Answer 1

CSS应该放在head标签中。这样，DOM元素可以在它们出现时设置样式。

JS应该放在关闭的body标签之前。这将确保您的DOM元素可以立即加载到视图中，而不会在JS文件加载时被阻止。

Answer 2

它是真实的 - 在头部渲染页面而不必解析js的头部，你应该把它放在页面的底部，除非它对渲染至关重要。

Answer 3

除了将CSS置于顶部之外，您还应该考虑缓存。将CSS存储在样式表中允许用户的浏览器重用和缓存它。 JS是相同的方式，可以最好地托管共同的CDN。例如，从Google或jquery.com加载JQuery，因为它更有可能已经缓存在用户浏览器中。如果它尚未缓存，您也可以从CDN的速度中受益，因为它们往往使服务器比标准Web服务器更接近客户端。

Answer 4

下面我想向您展示我们在公司中使用的一些做法。我不得不承认它对Google PageSpeed工具有很大的偏见。恶意八卦会说：＆＃34;它通过谷歌的眼镜和＃34; ; - ）

重要说明：我们仅在部署中应用以下规则。我们的开发环境保持整洁，有条理，井井有条。

CSS

内联折叠内容所需的所有CSS：

<head>
  ...
  <style>
  /* CSS goes here */
  </style>

</head>

尽可能地稀疏！

将您的外部CSS链接到文档的head部分 - 照常营业 - 但尝试将所有剩余的CSS合并到至少一个外部文件中。浏览器必须先下载每个CSS文件，然后才能显示页面。避免那些不必要的往返时间！

的Javascript

内嵌折叠上方页面所需的所有代码，以便立即使用/与之交互：

<head>
  ...
  <script type="text/javascript">
  /* Javascript goes here */
  </script>

</head>

推迟加载剩余的javascript。以下代码是Google推荐的纯粹速度代码。将以下代码放在结束标记之前的HTML中。它说：＆＃34;等待整个文件加载＆＃34;然后得到外部的东西 - 比如＆＃39; defer.js＆＃39;在我的例子中。可以轻松添加其他脚本。

...
  <script type="text/javascript">
  function downloadJSAtOnload() {
      var element = document.createElement("script");
      element.src = defer.js";
      document.body.appendChild(element);
  }

  if (window.addEventListener) {
     window.addEventListener("load", downloadJSAtOnload, false);
  } else if (window.attachEvent) {
      window.attachEvent("onload", downloadJSAtOnload);
  } else {
      window.onload = downloadJSAtOnload;
  }
  </script>
</body>

最好把CSS / JS放在哪里 - 顶部，正面还是底部？

4 个答案:

CSS

的Javascript