css的加載是不會阻塞DOM的解析,但是會阻塞DOM的渲染，會阻塞link后面js語句的執行。這是由於瀏覽器為了防止html頁面的重復渲染而降低性能，所以瀏覽器只會在加載的時候去解析dom樹，然后等在css加載完成之后才進行dom的渲染以及執行后面的js語句。這就是造成在css下載完成之前，頁面剛開始會出現白屏現象的原因。
瀏覽器渲染流程：
-
瀏覽器開始解析目標HTML文件,執行流的順序為自上而下。
-
HTML解析器將HTML結構轉換為基礎的DOM(文檔對象模型),構建DOM樹完成后,觸發DomContendLoaded事件。
-
CSS解析器將CSS解析為CSSOM(層疊樣式表對象模型),一棵僅含有樣式信息的樹。
-
CSSOM和DOM開始合並構成渲染樹,每個節點開始包含具體的樣式信息。
-
計算渲染樹中個各個節點的位置信息,即布局階段。
-
將布局后的渲染樹顯示到界面上。
51220網站目錄 https://www.51220.cn
根據以上的流程，可以知道，當cssdom還沒構建完成時，頁面是不會渲染到瀏覽器界面的，這也是為什么當css下載過慢時，會出現白屏的現象，以下是模擬白屏的例子：
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>this is a test</h1>
<link rel="stylesheet" type="text/css" href="test.css">
<img src="1.jpg">
<hr>
<span>this is a test</span>
</body>
</html>test.css:
img{
width: 50%;
}使用fidder延遲css的響應：
if(oSession.uriContains('test.css')){
oSession["response-trickle-delay"] = "3000";
}
可以看到，在1.4s的時候，html文檔和img已經下載完成，但是頁面並沒有渲染，而是等到css加載完成后再渲染出來，這也證實了css加載過程中會阻塞頁面的渲染。所以在我們的前端日常開發中，應盡量減少css的響應時間。