【回流和重绘】

浏览器渲染CSS样式的流程

• 解析HTML，生成DOM树，解析CSS，生成CSSOM树

• 将DOM树和CSSOM树结合，生成渲染树(Render Tree)

• Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）

• Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素

• Display:将像素发送给GPU，展示在页面上

什么是回流？

布局引擎会根据各种样式计算每个盒子在页面上的大小与位置

回流的触发时机

• 添加或删除可见的DOM元素
• 元素的位置发生变化
• 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
• 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代
• 页面一开始渲染
• 浏览器的窗口尺寸变化
• 获取一些特定属性的值(offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight)
• getComputedStyle方法

什么是重绘？

当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制

重绘的触发时机

• 触发回流一定会触发重绘

• 颜色的修改

• 文本方向的修改

• 阴影的修改

如何减少回流和重绘

（1）如果想设定元素的样式，通过改变元素的class类名

（2）避免设置多项内联样式

（3）应用元素的动画，使用position属性的fixed值或absolute值

（4）避免使用table布局

（5）对于那些复杂的动画，对其设置position:absolute/fixed，尽可能地使元素脱离文档流，从而减少对其他元素的影响

（6）使用css3硬件加速，可以让filters,opacity,transform这些动画不会引起回流重绘

（7）避免使用 CSS 的JavaScript表达式

（8）在使用JavaScript动态插入多个节点时, 使用DocumentFragment创建后一次插入

总结

以上就是我对于回流和重绘的理解，希望对在回流重绘方面有疑惑的你有所帮助！