回流和重绘

回流和重绘

一、回流和重绘

HTML中有着盒子模型的概念，浏览器在解析的过程中，根据元素的位置、样式的改变便会导致回流和重绘。

• 回流：如果盒子模型的大小或位置发生了改变，触发回流
• 重绘：盒子模型的大小和位置计算好之后，浏览器根据每个盒子模型进行绘制

二、浏览器解析渲染机制

• 解析HTML，生成DOM树，解析CSS，生成CSSOM树（同时进行）
• 将DOM树和CSSOM树结合，生成渲染树(Render Tree)
• Layout(回流): 根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
• Painting(重绘): 根据渲染树以及回流得到的几何信息，得到节点的绝对像素
• Display: 将像素发送给GPU，展示在页面上

分析解析流程就可以得知：如果元素的集合位置发生了改变，则浏览器需要重新计算节点的几何信息。

执行回流之后，浏览器已经获取了需要渲染的盒子模型的几何信息，然后按照样式绘制盒子模型的相关样式（重绘）。

以上流程理解之后就能知道回流和重绘的关系：回流必定触发重绘，重绘不一定触发回流

未完待续…