本篇內(nèi)容介紹了“在瀏覽器加載CSS時如何防止影響頁面渲染”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

成都創(chuàng)新互聯(lián)是一家專業(yè)提供仲巴企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計制作、成都網(wǎng)站制作、html5、小程序制作等業(yè)務(wù)。10年已為仲巴眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計公司優(yōu)惠進行中。

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

警告! 我發(fā)這篇帖子全是好意，但是它并不負責讓讀它的人意識到下面將會遇到的問題. 社區(qū)很快地給了我許多的反饋 (有些反饋我很感激) ，而越來越明顯的是這項技術(shù)并不如我所希望的那樣穩(wěn)定. 不像我那樣的成功地對它進行了測試和利用，許多開發(fā)者在 IE 和 Firefox 中都遇到了問題( F F測試版中直接崩潰) 而其他人則報告在 Chrome 和 Safari 中是成功的。我現(xiàn)在的建議是: 不要將其用于產(chǎn)品。我計劃處理好這些反饋，并結(jié)合任何有關(guān)的信息對本文進行更新。

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

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

CSS Code復制內(nèi)容到剪貼板

1. <link rel="stylesheet" href="css.css" media="none">  

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

CSS Code復制內(nèi)容到剪貼板

1. <link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'">  

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

這一技術(shù)使用了 JavaScript，但是你也可以在一個<noscript>元素中封裝一個等價的阻塞方式的 <link> 元素來處理不能運行 JavaScript 的瀏覽器:
 

CSS Code復制內(nèi)容到剪貼板

1. <link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'">   

2. <noscript><link rel="stylesheet" href="css.css"></noscript>  

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

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

CSS Code復制內(nèi)容到剪貼板

1. <link rel="stylesheet" href="main.css">   

2. <link rel="stylesheet" href="font.css" media="none" onload="if(media!='all')media='all'">  

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

CSS Code復制內(nèi)容到剪貼板

1. @font-face {   

2.   font-family: Merriweather;   

3.   font-style: normal;   

4.   font-weight: 400;   

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

6. }  

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

CSS Code復制內(nèi)容到剪貼板

1. body {   

2.   font-family: Merriweather, "Lucida Grande", ...;   

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ù)延遲一會。

“在瀏覽器加載CSS時如何防止影響頁面渲染”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

本文題目：在瀏覽器加載CSS時如何防止影響頁面渲染
文章來源：http://jinyejixie.com/article22/gpsjjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導航、微信小程序、企業(yè)建站、定制網(wǎng)站、網(wǎng)頁設(shè)計公司、虛擬主機

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)