CSS加载会造成堵塞吗？

点击上方前端Q，关注公众号

回复加群，加入前端Q技术交流群

文章来源于稀土掘金技术社区——敲代码的彭于晏1. 配置浏览器网络速度

首先配置浏览器网络速度，使现象更明显。

打开chrome控制台(按下F12)，选择No Throttling，并在Custom中选择Add

1696733672891.png

对浏览器上传与下载速度进行限制

1696733695177.png

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节点，说明CSS加载不会堵塞DOM的解析

1696733748075.png

使用Performance进行分析：可以看到在css加载完成后，DOM渲染才完成，说明CSS加载会堵塞DOM渲染（CSS加载完成前，页面白屏）

1696733775214.png

Load：在所有依赖资源加载完触发
LCP（largest contentful Paint）：页面最大内容渲染时间
FP（First Paint）：第一个像素渲染到屏幕上的时间
FCP（First Contentful Paint）：渲染出第一个内容。内容可以是文本、图片

3. 原理分析

3534846-00ef9f3d405462ef.png

从图中可知，Chrome浏览器渲染流程如下：

1.解析HTML，生成DOM树

2.解析CSS，生成CSS规则树

3.合并DOM树和CSS规则树，生成渲染树

4.布局

5.绘制

从流程可以看出来，DOM解析和CSS解析是两个并行的过程，因此CSS加载不会堵塞DOM的解析。但渲染树依赖CSS规则树，因此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("经过了" + (endDate - startDate) + "ms");
    </script>
  </body>
</html>