web前端入門到實戰：異步加載CSS最簡單的實現方式

我們想提高網頁性能的最有影響力的措施之一，就是以不延遲網頁渲染的方式加載CSS。

在默認情況下，瀏覽器在加載CSS時將終止頁面的樣式呈現（同步加載），也就是加載CSS會阻塞DOM樹的渲染（但并不會阻塞DOM樹的構建），可以簡單理解為：當在加載CSS的同時，也在構建DOM樹，只是沒有應用上樣式。

渲染流程

簡單過一遍瀏覽器渲染的流程：

1. 加載HTML資源
2. 解析HTML
3. 加載CSS資源，同時構建DOM樹
4. 解析CSS，同時渲染DOM樹

當CSS文件過大，就會停留在第3步，所以網速慢時，打開網站的時候經常遇到沒有樣式的情況。

所以我們需要先加載部分CSS（首屏需要用到的CSS），其他優先級比較低的CSS就以異步的方式加載。與script元素不同，沒有async或defer屬性可以簡單地應用于link元素，但是可以模擬。

異步加載

1. 利用媒體查詢

設置一個當前瀏覽器不支持的值：

<link rel="stylesheet" href="./index.css" media="none" onload="this.media='all'">

這樣瀏覽器將會異步加載這個CSS文件（優先度比較低），在加載完畢之后，使用onload屬性將link的媒體類型設置為all，然后便開始渲染。

如果有如下代碼：

<link rel="stylesheet" href="./index2.css" media="none" onload="this.media='all'">
<link rel="stylesheet" href="./index1.css">
web前端開發學習Q-q-u-n：784783012 ，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法（詳細的前端項目實戰教學視頻）

瀏覽器加載優先級如下：

又或者有如下代碼：

<link rel="stylesheet" href="./index1.css" media="screen and (max-width: 800px)">
<link rel="stylesheet" href="./index2.css" media="screen and (min-width: 800px)">

刷新頁面時，如果視窗寬度小于800px，那么優先加載index1.css，如果大于800px，則相反：

總結：媒體查詢不匹配的樣式優先級低?。

2. 提前加載資源

這個跟上述類似，但是優先級是最高的，不過還是異步加載，不會阻塞DOM的渲染，只是瀏覽器支持度比較低?。

<link rel="preload" href="./index.css" as="style">

告訴瀏覽器"請提前加載好此資源，我后面會用到！"。當用到的時候，瀏覽器便從緩存中拿取?。

所以正確操作跟媒體查詢一樣：

<link rel="preload" href="./index.css" as="style" onload="this.rel='stylesheet'">

當然，該屬性還可以應用于其他資源，當你需要用到這些資源的時候，瀏覽器會直接從緩存中拿，不再次發送請求了。

<link rel="preload" href="./index.js" as="script">
<link rel="preload" href="./index.png" as="image">
<link rel="preload" href="./index.mp4" as="video" type="video/mp4">

3. 撈仔寫法

let link = document.createElement("link");
link.rel = "stylesheet";
link.href = "./index1.css";

document.head.appendChild(link);
web前端開發學習Q-q-u-n：784783012 ，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法（詳細的前端項目實戰教學視頻）

總結

重要樣式使用同步加載（常規寫法），優先級低的則使用異步加載，異步加載不會阻塞頁面的渲染。

越來越多的人發現，可能只需要簡單的HTML方法，而簡單往往是最好的。

<link rel="stylesheet" href="./main.css">
<link rel="stylesheet" href="./other.css" media="none" onload="this.media='all'">