15浏览器渲染原理：浏览器渲染引擎工作原理

1.渲染引擎工作流解析

2.重绘与重排

1.渲染引擎工作流解析

1. HTML解析
   浏览器对HTML文档进行解析，并在解析HTML的过程中发出页面渲染所需的各种外部资源请求。
   产物：DOM树
2. CSS解析
   浏览器识别并加载所有的CSS样式信息。
   产物：CSSDOM树
3. 样式结构合并
   将文档结构（DOM树）和样式信息（CSSDOM树）合并。
   产物： render 树。
4. 布局阶段
   计算页面中所有元素的相对位置信息和尺寸信息。
5. 页面绘制
   绘制页面信息。

2.重绘与重排

2-1 重排

当我们的操作引发了DOM几何尺寸的变化（比如修改了元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其它元素的几乎属性和位置因此也受到影响），再将计算的结果绘制出来。

2-2 重绘

当我们对DOM的修改导致了样式的变化却并未影响几乎属性，浏览器不需要重新计算元素的几何属性，直接为元素绘制新的样式。