html5|web前端 - 真实DOM渲染过程 html5

1.构建DOM树。通过html parser解析处理html标记，将它们构建为DOM树(DOM tree) ，当解析器遇到非阻塞资源(图片， css)会继续解析，但是如果遇到script标签(特别是没有async 和 defer属性) ，会阻塞渲染并停止html的解析，这就是为啥最好把script标签放在body下面的原因。

2.构建cssOM树。与构建DOM类似浏览器也会将样式规则，构建成CSSOM 。浏览器会遍历CSS中的规则集，根据css选择器创建具有父子，兄弟等关系的节点树。

3.构建Render树。这一步将DOM和CSSOM关联，确定每个 DOM 元素应该应用什么 CSS 规则。将所有相关样式匹配到DOM树中的每个可见节点，并根据CSS级联确定每个节点的计算样式，不可见节点(head属性包括 display:none的节点)不会生成到Render树中。

4.布局/回流(Layout/Reflow) 。浏览器第一次确定节点的位置以及大小叫布局，如果后续节点位置以及大小发生变化，这一步触发布局调整，也就是回流。

5.绘制/重绘(Paint/Repaint) 。将元素的每个可视部分绘制到屏幕上，包括文本、颜色、边框、阴影和替换的元素（如按钮和图像）。如果文本、颜色、边框、阴影等这些元素发生变化时，会触发重绘(Repaint) 。为了确保重绘的速度比初始绘制的速度更快，屏幕上的绘图通常被分解成数层。将内容提升到GPU层(可以通过tranformfilterwill-changeopacity触发)可以提高绘制以及重绘的性能。

6.合成(Compositing) 。这一步将绘制过程中的分层合并，确保它们以正确的顺序绘制到屏幕上显示正确的内容。
今天的爱创课堂小编就分享到这里了，有想学习前端，了解前端更多知识的同学，欢迎大家点赞、关注、私信我！！！
【html5|web前端 - 真实DOM渲染过程】