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