在瀏覽器加載CSS時怎么防止影響頁面渲染

這篇文章主要講解了“在瀏覽器加載CSS時怎么防止影響頁面渲染”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“在瀏覽器加載CSS時怎么防止影響頁面渲染”吧！

CSS Code復制內容到剪貼板

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

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

CSS Code復制內容到剪貼板

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

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

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

CSS Code復制內容到剪貼板

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

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

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

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

CSS Code復制內容到剪貼板

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復制內容到剪貼板

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 包含了需要應用到站點的所有樣式規則。下面是字體的聲明：
 

CSS Code復制內容到剪貼板

1. body {   

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

3. }  

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

感謝各位的閱讀，以上就是“在瀏覽器加載CSS時怎么防止影響頁面渲染”的內容了，經過本文的學習后，相信大家對在瀏覽器加載CSS時怎么防止影響頁面渲染這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！