当前位置: 首页 > 工具软件 > reflow > 使用案例 >

reflow(重排、回流)和repaint(重绘)

洪安顺
2023-12-01

reflow和repaint的区别:

  • reflow:浏览器需要去渲染,当它发现某个dom发生了变化不仅仅改变自身,会导致后面的元素位置全部改变并且影响了布局,则需要倒回去重新渲染;
  • repaint:不影响元素周围或者内部布局,只改变某个dom元素的颜色或者文字颜色,则会进行重绘

什么的时候会发生reflow?

  • 页面进行初始化的时候;
  • 对dom元素进行操作的时候(删除或者增加);
  •  改变dom元素的尺寸;
  • CSS的属性发生变化,例如display属性;
  • 页面的文本和图片等内容的改变
  • 浏览器窗口尺寸改变(resize事件)

如何减少reflow、repaint?

  • 避免在document上直接对dom进行操作
  •  集中对样式进行修改,通过className来进行样式的修改,通过classText属性设置样式值;
  • 尽量避免使用table布局,table布局中某个元素触发会导致所有其他元素reflow,若有table布局,可以设置table-layout:auto/fixed,可以使table一行行的渲染,缩小reflow的范围;
  • 将Layout属性值进行缓存,需要多次访问的在一次访问时先存储在局部变量中;
  • 避免在css里面写expression;
  • 权衡速度的平滑,比如实现一个动画,以1个像素为单位移动这样最平滑,但 reflow 就会过于频繁,CPU 很快就会被完全占用。但以3个像素为单位移动就会好很多。
 类似资料: