本文展示了一種技術(shù)，它能通過異步下載樣式表，以阻止它們的下載阻塞頁面的渲染，從而盡可能快的讓訪問者獲取到信息內(nèi)容。

這些技術(shù)背后的原理不是新的。例如燈絲（Filament）技術(shù)組已經(jīng)發(fā)布了大量有關(guān)加載CSS和字體的內(nèi)容. 我寫就本文以記錄我對加載非阻塞資源的想法和觀點(diǎn)。

觸發(fā)異步樣式下載的訣竅是使用一個(gè)  元素，并 為media 屬性設(shè)置一個(gè)不可用的值 (我用的是 media="none", 不過其它的任何值也是可以的)。當(dāng)一個(gè)媒體查詢的結(jié)果值計(jì)算出來是 false 的時(shí)候，瀏覽器仍然會下載樣式表，但是不會在渲染頁面之前等待樣式表的資源可用。

1

樣式表一下載好，media 屬性就必須被設(shè)置一個(gè)可用的值，以便樣式規(guī)則能被應(yīng)用到 html 文檔中onload 事件就可以用來將 media 屬性切換到all：

1

這種加載 CSS 的方法將比標(biāo)準(zhǔn)的方法在向訪問者傳送有用信息的速度上快很多。至關(guān)重要的 CSS 加載時(shí)仍然可以用一般的阻塞方式處理 (或者你也可以為了最終的性能對它進(jìn)行內(nèi)聯(lián)處理) ，而不重要的樣式則可以慢慢下載，并在解析/渲染過程的后面一點(diǎn)的階段進(jìn)行應(yīng)用.

這一技術(shù)使用了 JavaScript，但是你也可以在一個(gè)

這項(xiàng)技術(shù)有一個(gè)副作用。當(dāng)一個(gè)非阻塞的樣式表完成加載，文檔就將進(jìn)行重繪，以反映它定義的任何新的樣式規(guī)則。而注入新的樣式到頁面中會觸發(fā)內(nèi)容回流, 但這也只是在這對第一次沒有歷史緩存的頁面加載過程中會是一個(gè)問題。由于任何跟性能有關(guān)的東西，你都將要在需要控制一次回流耗費(fèi)超過潛在的速度優(yōu)勢時(shí)，進(jìn)行必要的調(diào)整。

使用非阻塞 CSS 加載字體

字體第一次繪制的性能是一個(gè)問題，它們是阻塞式的資源，也會讓應(yīng)用它們的文本在該字體下載時(shí)不可見 。使用上述示例中的非阻塞鏈接，就可能在幕后下載包含字體數(shù)據(jù)的樣式表，不阻塞壓面的渲染：

1

2

font.css 包含一個(gè) base64 編碼的 WOFF 版本的Merriweather 字體。

1@font-face{

2font-family:Merriweather;

3font-style:normal;

4font-weight:400;

5src:local('Merriweather'),url('data:application/x-font-woff;charset=utf-8;base64,...')

6}

main.css 包含了需要應(yīng)用到站點(diǎn)的所有樣式規(guī)則。下面是字體的聲明：

1body{

2font-family:Merriweather,"LucidaGrande",...;

3}

當(dāng)字體正在下載時(shí)，第一個(gè)匹配到的備用回退字體 (這里就是Lucida Grande) 被用來渲染頁面的內(nèi)容。 一旦字體樣式表被應(yīng)用了，Merriweather就會被使用. 我嘗試去確?；赝说淖煮w將相似的布局特征共享給優(yōu)先選擇的字體，那樣不可避免的回流就盡可能微妙了。

我在基于一個(gè)模擬的 3G 網(wǎng)絡(luò)連接的 Chrome 中，使用我的Google Analytics Debugger 站點(diǎn)拿阻塞和非阻塞方式進(jìn)行了對比測試。本地的測試產(chǎn)生了如下所示的網(wǎng)絡(luò)圖；注意 DOMContentLoaded 在更早的 450ms 觸發(fā)了，而資源在運(yùn)用了非阻塞技術(shù)后下載起來更快了：

模擬 3G 網(wǎng)絡(luò)的圖形。頂部顯示了阻塞式的字體。底部顯示了非阻塞式的字體。

將其部署到一個(gè)測試服務(wù)器并在 3G 連接環(huán)境下運(yùn)行webpagetest構(gòu)造產(chǎn)生了如下時(shí)間線 ：

3G 時(shí)間線。頂部顯示阻塞式的字體，底部展示非阻塞式的字體。

兩種方法都花了2.8秒鐘來完整的渲染頁面，但是非阻塞方法比一般的阻塞方法使得繪制早了1秒鐘。在在主樣式表進(jìn)行了內(nèi)聯(lián)的情況下運(yùn)行相同的測試，顯示了在將非阻塞 CSS 被應(yīng)用于處理字體時(shí)有0.7秒的時(shí)間優(yōu)勢：

主 CSS 內(nèi)容的 3G 時(shí)間線。頂部顯示阻塞式字體，底部顯示非阻塞式字體。

這一技術(shù)對于字體的效果確實(shí)很好，但是我也建議對新的CSS 字體加載模塊保持密切關(guān)注，它會給與我們超過字體加載的更多的控制能力。

總結(jié)

加載字體是應(yīng)用非阻塞技術(shù)的一個(gè)例子，而他也可以被用于其它的目的，比如從核心的 CSS 處分離出 JavaScript 增強(qiáng)的樣式。

我已經(jīng)開始去嘗試將樣式分成框架(核心布局) 和展現(xiàn) (其它所有的東西)這種想法，它可以讓重要的頁面布局阻塞頁面渲染，而可見的樣式數(shù)據(jù)延遲一會。