什么是__重绘(repaint)和回流(reflow)

180 阅读1分钟

什么是重绘Repaint 和 回流reflow?

1.重绘

当元素的一部分属性发生改变,如外观、背景、颜色等不会引起布局变化,只需要浏览器根据元素的新属性重新绘制,使元素呈现新的外观叫做重绘。

2.回流

当render树中的一部分或者全部因为大小边距等问题发生改变而需要DOM树重新计算的过程

重绘不一定需要回流(重排)(比如颜色的改变),但是回流必然会导致重绘(比如改变网页位置)

方法

  • 1、需要对元素惊醒复杂的操作时,可以先隐藏(display:none),操作完成后再显示
  • 2、需要创建多个DOM节点时,使用DocumentFrament 创建完后一次性的加入document缓存Layout属性值。如 : let left = elem.offsetLeft 这样,多次使用left 只产生一次回流
  • 3、尽量避免用 table 布局(table 元素一旦触发回流就会导致 table 里所有的其它元素回流) - 4、避免使用 css 表达式(expression),因为每次调用都会重新计算值(包括加载页面)
  • 5、尽量使用 css 属性简写,如:用 border 代替 border-width, border-style, border-color
  • 6、批量修改元素样式:elem.className 和 elem.style.cssText 代替 elem.style.xxx