浏览器渲染网页流程

浏览器渲染页面的基本步骤：

1.解析HTML：浏览器开始解析HTML文档，构建DOM（Document Object Model)树。DOM树是页面结构的内存表示，每个节点代表一个HTML元素。

2.解析CSS：浏览器解析CSS样式表，将CSS规则应用到DOM树上的相应元素，构建CSSOM（CSS Object Model）树。

3.构建渲染树：浏览器结合DOM树和CSSOM树，生成渲染树。渲染树包含了需要显示在屏幕上的所有元素和它们的视觉样式。

4.布局（Layout):浏览器计算渲染树种每个节点的大小，位置等几何信息。这个步骤也成为“流式布局”（flow layout)

5.绘制（Painting）：浏览器遍历渲染树，并使用UI基础组件绘制每个节点。绘制过程涉及到将文本，颜色，图片，边框等绘制到屏幕上。

6.合成（Compositing):在具有多层的浏览器中（如Chrome），绘制过程可能涉及到多个层。浏览器会将这些层合成到一起，形成最终的屏幕图像。

7.显示：最终,浏览器将合成后的图像显示在屏幕图像。

8.JavaScript执行：在渲染流程中，如果遇到javaScript代码，浏览器可能会暂停渲染流程过程来执行脚本。这可能会修改DOM或者CSSOM，导致重新渲染。

9.重排（Reflow)和重绘（Repaint):如果DOM或CSSOM发生变化，浏览器可能需要重新执行布局和/或绘制过程。这被称为重排和重绘，它们会影响性能。

10.优化：为了提高性能，浏览器会尝试减少重排和重绘的次数，例如通过使用CSS的will-change属性或通过JavaScript的requestAnimationFrame函数来平滑动画。