瀏覽器渲染流程：

　　1、瀏覽器開始解析目標HTML文件，執行流的順序為自上而下。

　　2、HTML解析器將HTML結構轉換為基礎的DOM(文檔對象模型)，構建DOM樹完成後，觸發DomContendLoaded事件。

　　3、CSS解析器將CSS解析為CSSOM(層疊樣式表對象模型)，一棵僅含有樣式信息的樹。

　　4、CSSOM和DOM開始合並構成渲染樹，每個節點開始包含具體的樣式信息。

　　5、計算渲染樹中個各個節點的位置信息，即布局階段。

　　6、將布局後的渲染樹顯示到界面上。

　　根據以上的流程，可以知道，當cssdom還沒構建完成時，頁面是不會渲染到瀏覽器界面的，這也是為什麽當css下載過慢時，會出現白屏的現象。

　　我們可以模擬白屏的例子，可以看到html文檔和img已經下載完成，但是頁面並沒有渲染，而是等到css加載完成後再渲染出來，這也證實了css加載過程中會阻塞頁面的渲染。所以在我們的前端日常開發中，應盡量減少css的響應時間

　　默認情況下，CSS 被視為阻塞渲染的資源，這意味著瀏覽器將不會渲染任何已處理的內容，直至 CSSOM 構建完畢。請務必精簡您的 CSS，盡快提供它，並利用媒體類型和查詢來解除對渲染的阻塞。

　　在渲染樹構建中，我們看到關鍵渲染路徑要求我們同時具有 DOM 和 CSSOM 才能構建渲染樹。這會給性能造成嚴重影響：HTML 和 CSS 都是阻塞渲染的資源。

　　HTML 顯然是必需的，因為如果沒有 DOM，我們就沒有可渲染的內容，但 CSS 的必要性可能就不太明顯。

　　不過，如果我們有一些 CSS 樣式只在特定條件下（例如顯示網頁或將網頁投影到大型顯示器上時）使用，又該如何？如果這些資源不阻塞渲染，該有多好。

　　我們可以通過 CSS“媒體類型”和“媒體查詢”來解決這類用例：

<link href="style.css" rel="stylesheet"> 
<link href="print.css" rel="stylesheet" media="print"> 
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">

　　媒體查詢由媒體類型以及零個或多個檢查特定媒體特征狀況的表達式組成。

　　例如，上面的第一個樣式表聲明未提供任何媒體類型或查詢，因此它適用於所有情況，也就是說，它始終會阻塞渲染。第二個樣式表則不然，它只在打印內容時適用---或許您想重新安排布局、更改字體等等，因此在網頁首次加載時，該樣式表不需要阻塞渲染。最後，最後一個樣式表聲明提供由瀏覽器執行的“媒體查詢”：符合條件時，瀏覽器將阻塞渲染，直至樣式表下載並處理完畢。

　　通過使用媒體查詢，我們可以根據特定用例（比如顯示或打印），也可以根據動態情況（比如屏幕方向變化、尺寸調整事件等）定制外觀。聲明您的樣式表資產時，請密切註意媒體類型和查詢，因為它們將嚴重影響關鍵渲染路徑的性能。

　　讓我們考慮下面這些實例：

<link href="style.css" rel="stylesheet"> 
<link href="style.css" rel="stylesheet" media="all"> 
<link href="portrait.css" rel="stylesheet" media="orientation:portrait"> 
<link href="print.css" rel="stylesheet" media="print">

　　第一個聲明阻塞渲染，適用於所有情況。

　　第二個聲明同樣阻塞渲染：“all”是默認類型，如果您不指定任何類型，則隱式設置為“all”。因此，第一個聲明和第二個聲明實際上是等效的。

　　第三個聲明具有動態媒體查詢，將在網頁加載時計算。根據網頁加載時設備的方向，portrait.css 可能阻塞渲染，也可能不阻塞渲染。

　　最後一個聲明只在打印網頁時應用，因此網頁首次在瀏覽器中加載時，它不會阻塞渲染。

　　最後，請註意“阻塞渲染”僅是指瀏覽器是否需要暫停網頁的首次渲染，直至該資源準備就緒。無論哪一種情況，瀏覽器仍會下載 CSS 資產，只不過不阻塞渲染的資源優先級較低罷了。

CSS阻塞渲染、怎麽防止css阻塞