什么会阻塞浏览器的渲染呢？css?js?

VIP文章努力不熬夜的小喵

已于 2022-03-28 22:51:25 修改

阅读量1.8k

点赞数 2

文章标签： javascript 前端

于 2022-03-28 22:50:46 首次发布

本文链接：https://blog.csdn.net/qq_43569680/article/details/123808312

版权

一个渲染引擎主要包括：HTML解析器，CSS解析器，javascript引擎，布局layout模块，绘图模块

HTML解析器：解释HTML文档的解析器，主要作用是将HTML文本解释成DOM树
CSS解析器：它的作用是为DOM中的各个元素对象计算出样式信息，为布局提供基础设施
Javascript引擎：使用Javascript代码可以修改网页的内容，也能修改css的信息，javascript引擎能够解释javascript代码，并通过DOM接口和CSS树接口来修改网页内容和样式信息，从而改变渲染的结果
布局（layout）：在DOM创建之后，Webkit需要将其中的元素对象同样式信息结合起来，计算他们的大小位置等布局信息，形成一个能表达这所有信息的内部表示模型
绘图模块（paint）：使用图形库将布局计算后的各个网页的节点绘制成图像结果

构建 DOM 树：用 HTML 分析器，解析 HTML 元素，构建一棵 DOM 树；
构建 CSSOM 树：用 CSS 分析器，分析 CSS 文件和元素上的 inline 样式，构建出一棵 CSSOM 树；
若在构建 DOM 树的过程中，当 HTML 解析器遇到一个 script 标记时，即遇到了 JS，将立即阻塞 DOM 树的构建，将控制权移交给 JS 引擎，等到 JS 引擎运行完毕，浏览器才会从中断的地方恢复 DOM 树的构建；
构建 Render 树：将 DOM 树和 CSSOM 树关联起来，构建一棵 Render 树;
确定节点坐标：根据 Render 树结构，为每个 Render 树上的节点计算确定一个在显示屏上出现的精确坐标；
绘制页面：根据 Render 树和节点显示坐标，然后调用每个节点的 paint 方法，将它们绘制出来。

CSS阻塞渲染
在构建渲染树时，需要完备的DOM树，CSSOM树，而CSSOM的解析可能会阻塞DOM解析，或者CSSOM树的未完成会阻塞渲染树的构建，这就是CSS阻塞渲染。
JS阻塞渲染
JS 可以查询和修改 DOM 与 CSSOM，所以当 HTML 解析器遇到一个 script 标记时，它会暂停构建 DOM，将控制权移交给 JS 引擎， HTML 解析器会等待 JS 引擎运行完毕，这就是所谓的JS阻塞渲染。

当在 JavaScript 中访问了某个元素的样式，那么这时候就需要等待这个样式被下载完成才能继续往下执行，所以在这种情况下（从某种角度看），CSS 也会阻塞 DOM 的解析。

<body>
    <h1>red1</h1>
    <link rel="stylesheet&

关注