[css] 異步加載CSS的方式有哪些？

異步加載CSS
說到加載 CSS 這種事兒不是很簡單嗎？像這樣咯：

這不就完事兒了嘛！

這樣是沒錯！但是這樣有問題啊——會阻塞渲染！瀏覽器看到這個標簽就會停下手里的活兒，去加載 CSS 并解析了。

當然了，如果這個 CSS 文件是接下來要渲染的內容所需的，那無可厚非，必須先要有了這個 CSS 才能接著渲染，阻塞也是情理之中。

但實際的情況卻是，我們很多 CSS 內容其實在首屏的時候是不需要，起碼等到后續才會使用，那么這個時候這些 CSS 這樣加載去阻塞內容渲染就不對了。

也就是說，針對優先級不那么高的（暫時用不到）CSS，就應該要想辦法讓它異步加載，不要阻塞瀏覽器渲染。

那么怎么弄呢？

老方子
現在介紹第一種老辦法：通過 JS 動態插入 link 標簽來異步載入 CSS 代碼，就像這樣：

var myCSS = document.createElement( “link” );
myCSS.rel = “stylesheet”;
myCSS.href = “mystyles.css”;
document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling );
這個很好理解吧，就是后續 JS 執行的時候，去創建一個 link 標簽來加載 CSS 代碼。

還有一個辦法呢就是利用 link 上的 media 屬性，將它設置為和用戶當前瀏覽器環境不匹配的值，比如：media=“print”，甚至可以設置為一個完全無效的值 media=“jscourse” 之類的。

這樣一來，瀏覽器就會認為這個 CSS 文件優先級非常低，就會在不阻塞的情況下進行加載。但是為了讓 CSS 規則生效，最后還是要將 media 值改對才行。所以，這個辦法落實到代碼就是這樣：

介紹完了老方子，我們再來看看新藥方。

新的異步加載方式
新方子就是利用規范中新增加的 rel=“preload” ，就像這樣：

通過 preload 屬性值就是告訴瀏覽器這個資源文件隨后會用到，請提前加載好。但是這只是加載，所以你看當它加載完畢后，還是需要將 rel 值改回去，這才能讓 CSS 生效。

你是不是想問：這和老方子也沒多大區別嘛！

看上去確實如此，但是呢，語義上更加好一些。另外就是你仔細點就會發現 as="style"這個屬性，所以 preload 不僅僅可以用在 CSS 文件上，而是可以用在絕大多數的資源文件上。比如：JS 文件

然后要用的時候，就創建一個 script 標簽指向它：

var script = document.createElement(“script”);
script.src = “scriptfile.js”;
document.body.appendChild(script);
這個時候瀏覽器就直接從緩存中拿這個文件了，不會再發請求了，因為此前已經加載好了。

那么 preload 中的 as 屬性支持哪些資源文件呢？下面這些都可以：

audio
document
embed
fetch
font
image
object
script
style
track
worker
video
是不是迫不及待想去試試了？告訴你個壞消息，目前 preload 只有 Chrome 是完美支持的，其他瀏覽器慘不忍睹，哎！

個人簡介

我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易，
但堅持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關前端面試題

總結

以上是生活随笔為你收集整理的[css] 异步加载CSS的方式有哪些？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。