2. CSS加載不會堵塞DOM的解析，但會堵塞DOM的渲染

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>css阻塞</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      h1 {
        color: red !important;
      }
    </style>
    <script>
      function h() {
        console.log(document.querySelectorAll("h1"));
      }
      setTimeout(h, 0);
    </script>
    <link
      href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <h1>這是紅色的</h1>
  </body>
</html>

效果：在CSS加載時，JS就能獲取到DOM節(jié)點，說明CSS加載不會堵塞DOM的解析

使用Performance進(jìn)行分析：可以看到在css加載完成后，DOM渲染才完成，說明CSS加載會堵塞DOM渲染（CSS加載完成前，頁面白屏）

Load：在所有依賴資源加載完觸發(fā)
LCP（largest contentful Paint）：頁面最大內(nèi)容渲染時間
FP（First Paint）：第一個像素渲染到屏幕上的時間
FCP（First Contentful Paint）：渲染出第一個內(nèi)容。內(nèi)容可以是文本、圖片

3. 原理分析

從圖中可知，Chrome瀏覽器渲染流程如下：

1.解析HTML，生成DOM樹

2.解析CSS，生成CSS規(guī)則樹

3.合并DOM樹和CSS規(guī)則樹，生成渲染樹

4.布局

5.繪制

從流程可以看出來，DOM解析和CSS解析是兩個并行的過程，因此CSS加載不會堵塞DOM的解析。但渲染樹依賴CSS規(guī)則樹，因此CSS加載會堵塞DOM的渲染。

4. CSS加載會堵塞JS運行

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>css阻塞</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script>
      console.log("before css");
      var startDate = new Date();
    </script>
    <link
      href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <h1>這是紅色的</h1>
    <script>
      var endDate = new Date();
      console.log("after css");
      console.log("經(jīng)過了" + (endDate - startDate) + "ms");
    </script>
  </body>
</html>