重绘和重排是什么?有什么区别?

187 阅读1分钟

回流 又称重排 改变几何属性的渲染 (尺寸 大小 隐藏)

渲染树的节点发生改变,影响了节点的几何属性,导致节点位置发生变化,此时就会触发浏览器回流并重新生成渲染树。回流意味着节点的几何属性改变,需重新计算并生成渲染树,导致渲染树的全部或部分发生变化。

image.png

重绘 改变外观属性而不影响几何属性的渲染(外观 )

渲染树的节点发生改变,但不影响节点的几何属性。由此可见,回流对浏览器性能的消耗高于重绘且回流一定伴随重绘,重绘却不一定伴随回流。

image.png

性能优化 回流必定引发重绘,重绘不一定引发回流

回流重绘在操作节点样式时频繁出现,同时也存在很大程度上的性能问题。回流成本比重绘成本高得多,一个节点的回流很有可能导致子节点、兄弟节点或祖先节点的回流。尽量减少以下操作

  • 改变窗口大小
  • 修改盒模型
  • 增删样式
  • 重构布局
  • 重设尺寸
  • 改变字体
  • 改动文字

如何减少和避免回流重绘

使用visibility:hidden替换display:none
使用transform代替top
避免使用Table布局
避免规则层级过多
避免节点属性值放在循环中当成循环变量
动态改变类而不改变样式
将频繁回流重绘的节点设置为图层
使用requestAnimationFrame作为动画帧