优化CSS和JavaScript的加载顺序 - 移动网站性能技术白皮书

01-16 – 优化CSS和JavaScript的加载顺序
- 错误的方式
- 正确的方式

第一部分 – 第16章

CSS JS

对外部CSS文件以及内嵌CSS代码的调用应放置于外部JavaScript文件以及内嵌JavaScript代码之前。以这种操作方式，移动网站页面将得以更快加载。

如下展示了一个典型的浏览器在加载一个网站页面时如何对CSS和JavaScript进行响应。

当网络浏览器加载移动网站页面时，首先接收该页面的HTML，然后开始获取页面的所有资源文件（例如CSS, JavaScript,图片等）。
当网络浏览器开始下载JavaScript时，在JavaScript完全被加载之前就不再下载任何其他内容了。这正是不可以将JavaScript放置在CSS之前的原因。

错误的方式

下列HTML代码显示了所有外部JavaScript文件均被放置在所有外部CSS文件和内嵌CSS代码之前。这对于页面加载速度而言，并没有实现最佳顺序。

<head>
<script src="http://res.example.com/script.js"></script>
<script src="http://m.example-2.com/script2.js"></script>
<link rel="stylesheet" href="http://res.example.com/style.css" />
<link rel="stylesheet" href="http://m.example-2.com/style2.css" />
<style>
#section1 {
  background-color: red;
  color: white;
  font-family: "Courier New";
  text-align: left;
  padding: 10px;
}
#section2 {
  color: grey;
  font-size: 0.8em;
  font-style: italic;
}
</style>
</head>

正确的方式

下列HTML代码显示了所有外部CSS文件和内嵌CSS代码均被放置在所有外部JavaScript文件之前。这种方式是正确的，以最佳顺序对页面加载速度进行优化。

<head>
<link rel="stylesheet" href="http://res.example.com/style.css" />
<link rel="stylesheet" href="http://m.example-2.com/style2.css" />
<style>
#section1 {
  background-color: red;
  color: white;
  font-family: "Courier New";
  text-align: left;
  padding: 10px;
}
#section2 {
  color: grey;
  font-size: 0.8em;
  font-style: italic;
}
</style>
<script src="http://res.example.com/script.js"></script>
<script src="http://m.example-2.com/script2.js"></script>
</head>

移动网站性能技术白皮书在2017年3月正式出版。

英文版：Optimize the Loading Order of CSS and JavaScript – 繁体中文版：优化CSS和JavaScript的加载顺序

移动网站性能技术白皮书上的内容按下列许可协议发布： CC Attribution-Noncommercial 4.0 International

Gordon Choi's Mobile Website Book