第一部分 – 第16章
對外部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>
- 上一章:減少DNS查詢
- 下一章:避免CSS @Import
移動網站性能技術白皮書在2017年3月正式出版。
英文版:Optimize the Loading Order of CSS and JavaScript – 簡體中文版:優化CSS和JavaScript的加載順序
移動網站性能技術白皮書上的內容按下列許可協議發布: CC Attribution-Noncommercial 4.0 International