web前端入門(mén)到實(shí)戰(zhàn)：異步加載CSS最簡(jiǎn)單的實(shí)現(xiàn)方式

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

在默認(rèn)情況下，瀏覽器在加載CSS時(shí)將終止頁(yè)面的樣式呈現(xiàn)（同步加載），也就是加載CSS會(huì)阻塞DOM樹(shù)的渲染（但并不會(huì)阻塞DOM樹(shù)的構(gòu)建），可以簡(jiǎn)單理解為：當(dāng)在加載CSS的同時(shí)，也在構(gòu)建DOM樹(shù)，只是沒(méi)有應(yīng)用上樣式。

渲染流程

簡(jiǎn)單過(guò)一遍瀏覽器渲染的流程：

1. 加載HTML資源
2. 解析HTML
3. 加載CSS資源，同時(shí)構(gòu)建DOM樹(shù)
4. 解析CSS，同時(shí)渲染DOM樹(shù)

當(dāng)CSS文件過(guò)大，就會(huì)停留在第3步，所以網(wǎng)速慢時(shí)，打開(kāi)網(wǎng)站的時(shí)候經(jīng)常遇到?jīng)]有樣式的情況。

所以我們需要先加載部分CSS（首屏需要用到的CSS），其他優(yōu)先級(jí)比較低的CSS就以異步的方式加載。與script元素不同，沒(méi)有async或defer屬性可以簡(jiǎn)單地應(yīng)用于link元素，但是可以模擬。

異步加載

1. 利用媒體查詢(xún)

設(shè)置一個(gè)當(dāng)前瀏覽器不支持的值：

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

這樣瀏覽器將會(huì)異步加載這個(gè)CSS文件（優(yōu)先度比較低），在加載完畢之后，使用onload屬性將link的媒體類(lèi)型設(shè)置為all，然后便開(kāi)始渲染。

如果有如下代碼：

<link rel="stylesheet" href="./index2.css" media="none" onload="this.media='all'">
<link rel="stylesheet" href="./index1.css">
web前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n：784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻）

瀏覽器加載優(yōu)先級(jí)如下：

又或者有如下代碼：

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

刷新頁(yè)面時(shí)，如果視窗寬度小于800px，那么優(yōu)先加載index1.css，如果大于800px，則相反：

總結(jié)：媒體查詢(xún)不匹配的樣式優(yōu)先級(jí)低?。

2. 提前加載資源

這個(gè)跟上述類(lèi)似，但是優(yōu)先級(jí)是最高的，不過(guò)還是異步加載，不會(huì)阻塞DOM的渲染，只是瀏覽器支持度比較低?。

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

告訴瀏覽器"請(qǐng)?zhí)崆凹虞d好此資源，我后面會(huì)用到！"。當(dāng)用到的時(shí)候，瀏覽器便從緩存中拿取?。

所以正確操作跟媒體查詢(xún)一樣：

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

當(dāng)然，該屬性還可以應(yīng)用于其他資源，當(dāng)你需要用到這些資源的時(shí)候，瀏覽器會(huì)直接從緩存中拿，不再次發(fā)送請(qǐng)求了。

<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. 撈仔寫(xiě)法

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

document.head.appendChild(link);
web前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n：784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻）

總結(jié)

重要樣式使用同步加載（常規(guī)寫(xiě)法），優(yōu)先級(jí)低的則使用異步加載，異步加載不會(huì)阻塞頁(yè)面的渲染。

越來(lái)越多的人發(fā)現(xiàn)，可能只需要簡(jiǎn)單的HTML方法，而簡(jiǎn)單往往是最好的。

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