回流和重绘

回流（reflow）

提示

或者称为重排。

所有对 布局树的更改，以及所有对 布局树的读取，都会引发回流。

更改会导致 异步回流。

dom.style.width = '100px'
dom.style.height = '100px'
dom.style.border = '1px solid red'

// 浏览器会将这些更改放在一个队列中，最后集中处理，只会执行一次。

读取会导致 同步回流。

dom.clientHeight

// 浏览器会立即执行，会强制回流一次。

重绘（repaint）

所有 非几何信息 的读写所造成的可见样式的变化会引发重绘。

由于元素的布局信息也属于可见样式，所以 reflow 一定会引发 repaint。