为什么将CSS写在头部而将js写在尾部

先来看模板文件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="xx.css">
  <link rel="stylesheet" href="yy.css">
</head>
<body>
  <!-- 这里放内容 -->
  <script src="xx.js"></script>
  <script src="yy.js"></script>
</body>
</html>

一般推荐如上设置css文件和javascript文件位置。

浏览器从上到下依次解析html文档。将css文件放到头部，css文件可以先加载。避免先加载body内容，导致页面一开始样式错乱，然后闪烁。将javascript文件放到底部是因为：若将javascript文件放到head里面，就意味着必须等到所有的javascript代码都被下载、解析和执行完成之后才开始呈现页面内容。这样就会造成呈现页面时出现明显的延迟，窗口一片空白。为避免这样的问题一般将全部javascript文件放到body元素中页面内容的后面。