CSS加载会造成堵塞吗?

1. 配置浏览器网络速度

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

  1. 打开chrome控制台(按下F12),选择No Throttling,并在Custom中选择Add
  1. 对浏览器上传与下载速度进行限制

2. CSS加载不会堵塞DOM的解析,但会堵塞DOM的渲染

js 复制代码
<!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的解析

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

  1. Load:在所有依赖资源加载完触发

  2. LCP(largest contentful Paint):页面最大内容渲染时间

  3. FP(First Paint):第一个像素渲染到屏幕上的时间

  4. FCP(First Contentful Paint):渲染出第一个内容。内容可以是文本、图片

3. 原理分析

从图中可知,Chrome浏览器渲染流程如下:

1.解析HTML,生成DOM树

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

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

4.布局

5.绘制

从流程可以看出来,DOM解析和CSS解析是两个并行的过程,因此CSS加载不会堵塞DOM的解析 。但渲染树依赖CSS规则树,因此CSS加载会堵塞DOM的渲染

4. CSS加载会堵塞JS运行

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>

运行结果:

说明css会堵塞后面js执行

5. 原理分析

浏览器的渲染进程是多线程的,主要分为:GUI渲染线程、JS引擎线程、事件触发线程、定时器触发器线程、异步http请求线程

由于JS可能会操作之前的DOM节点和CSS样式,为了防止渲染出现不可预期的结果,浏览器设置 GUI 渲染线程与 JavaScript 引擎为互斥的关系,因此css会堵塞后面js的执行

6. 结论

1. CSS加载不会堵塞DOM的解析,但会堵塞DOM的渲染

2. CSS加载会堵塞后面JS的执行

相关推荐
旧味清欢|5 分钟前
关注分离(Separation of Concerns)在前端开发中的实践演进:从 XMLHttpRequest 到 Fetch API
javascript·http·es6
热爱编程的小曾22 分钟前
sqli-labs靶场 less 8
前端·数据库·less
gongzemin33 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox1 小时前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
-代号95271 小时前
【JavaScript】十四、轮播图
javascript·css·css3
树上有只程序猿1 小时前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼2 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
QTX187302 小时前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员