23.重排（reflow）与重绘（repaint）

23.重排（reflow）与重绘（repaint）

（1）浏览器从下载文档到显示页面的过程是个复杂的过程，这里包含了重绘和重排

（2）重绘是一个元素外观的改变所触发的浏览器行为（例如改变visibility，outline，background等属性），浏览器会根据元素的新

属性重新绘制，是元素呈现新的外观。

（3）重排时更明显的一种改变，可以理解为渲染树需要重新计算。常见的触发重排的操作：

a.DOM元素的几何属性变化

b.DOM树的结构变化（例如节点的增减、移动）

c.获取某些属性（例如offsetTop，offsetLeft，offsetHeight，offsetWidth，clientWidth，clientHeight等）

d.改变元素的一些样式（例如调整浏览器窗口大小）

（4）重绘不会带来重新布局，并不一定伴随着重排。

（5）在实践中，应该尽量减少重排次数和缩小重排的影响范围。有以下几种方法：

a.将多次改变样式属性的操作合并成一次操作

b.将需要多次重排的元素，position属性设为absolute或fixed，使其脱离文档流，这样它的变化就不会影响到其他元素

c.在内存中多次操作节点，完成后再添加到文档中去

d.如果要对一个元素进行复杂的操作，可以将其display属性设置为none使其隐藏，待操作完成后再显示

e.在需要经常获取那些引起浏览器重排的属性值时，要缓存到变量