回流 又称重排 改变几何属性的渲染 (尺寸 大小 隐藏)
渲染树的节点发生改变,影响了节点的几何属性,导致节点位置发生变化,此时就会触发浏览器回流并重新生成渲染树。回流意味着节点的几何属性改变,需重新计算并生成渲染树,导致渲染树的全部或部分发生变化。
重绘 改变外观属性而不影响几何属性的渲染(外观 )
渲染树的节点发生改变,但不影响节点的几何属性。由此可见,回流对浏览器性能的消耗高于重绘且回流一定伴随重绘,重绘却不一定伴随回流。
性能优化 回流必定引发重绘,重绘不一定引发回流
回流重绘在操作节点样式时频繁出现,同时也存在很大程度上的性能问题。回流成本比重绘成本高得多,一个节点的回流很有可能导致子节点、兄弟节点或祖先节点的回流。尽量减少以下操作
- 改变窗口大小
- 修改盒模型
- 增删样式
- 重构布局
- 重设尺寸
- 改变字体
- 改动文字