【JS】浏览器渲染机制及渲染阻塞

渲染机制
浏览器的渲染机制一般分为以下几个步骤

1. 处理 HTML 并构建 DOM 树。
2. 处理 CSS 构建 CSSOM 树。
3. 将 DOM 与 CSSOM 合并成一个渲染树。
4. 根据渲染树来布局，计算每个节点的位置。
5. 调用 GPU 绘制，合成图层，显示在屏幕上。

参考1

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

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

参考2

渲染阻塞

js是解释器阻塞资源；css是渲染阻塞资源

关于CSS加载的阻塞情况：参考3

1. css加载不会阻塞DOM树的解析
2. css加载会阻塞DOM树的渲染
3. css加载会阻塞后面js语句的执行

可