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

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

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

1

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

1

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

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

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

使用非阻塞 CSS 加載字體

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

1

2

font.css 包含一個 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)用到站點的所有樣式規(guī)則。下面是字體的聲明：

1body{

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

3}

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

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

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

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

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

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

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

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

總結(jié)

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

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