重绘(repaint) & 回流(reflow)

1 重绘(repaint)

概念: 当元素样式的改变不影响布局时, 浏览器将使用重绘对元素进行更新, 此时发生的过程就叫做重绘;
重绘只是UI层面的像素绘制, 消耗较少;

• 常见的重绘操作:
  a: 改变元素颜色;
  b: 改变元素背景色;
  c: ....

2 回流(reflow)

概念: 回流又叫做重排. 当元素的尺寸,结构或者触发某些属性时,浏览器会重新渲染页面, 称为回流;
回流需要浏览器重新经过计算,计算后重新渲染页面布局,损耗较大;

• 常见的回流操作:
  a: 页面初次渲染;
  b: 浏览器窗口大小的改变;
  c: 元素尺寸 位置 内容 发生改变;
  d: 添加或者删除可见的DOM元素;
  e: 激活 css 伪类(:hover....);
  f: ....

总结 :

1. 回流必定会触发重绘,重绘不一定会触发回流;
2. 回流的开销大于重绘的开销