第一阶段:HTML解析 --> DOM树
浏览器不能够直接理解 HTML文档,首先对其进行解析,并在解析过程中发出页面渲染所需的各种外部资源请求生成DOM树。
第二阶段: CSS解析 --> CSSOM树
同样浏览器也办法直接理解 CSS 代码,需要将识别并加载的CSS 代码处理成自己理解的 CSSOM 树。
第三阶段: 样式与结构合并 --> 渲染树
浏览器将DOM 树和 CSSOM 树结合在一起生成渲染树(:after :before 等伪元素会在这个环节被构建到 DOM 树中)。
渲染树特点:只包含渲染网页所需的节点。
构建渲染树的过程
第四阶段: 页面布局 --> 布局渲染树
浏览器对渲染树进行遍历,将元素间嵌套关系以盒子模型的形式写入文档流盒模型,并在布局过程中会计算出元素确切的大小和定位。计算完毕后,将相应的信息写回渲染树上形成“布局渲染树”。
第五阶段: 页面绘制 --> 显示页面
在这一阶段浏览器终于拿到了绘制页面的所有信息,将渲染树上的每一个节点转换成肉眼可见的像素点,最终将页面呈现在我们面前。
当我们修改DOM节点的宽、高或进行隐藏操作时,浏览器就需要重新计算节点的几何属性,然后再将计算的结果绘制出来的过程叫做重排(也叫回流)。
当我们修改DOM的样式(未影响其几何属性)时,浏览器需要重新为元素绘制新的样式过程叫做重绘。
修改DOM的样式,但未影响其几何属性会发生重绘。
重排和重绘是比较消耗性能的,因此在开发过程中,我们应该避免重排和减少重绘。
本文到此结束
如果大家还有什么其他想法,欢迎在评论区交流!