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" >

這樣瀏覽器將會非同步載入這個 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" >

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

<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'">