简单理解回流与重绘

浏览器的渲染过程：

• 解析HTML，生成DOM树，同时解析CSS，生成CSSOM树
• 将DOM树和CSSOM树结合，生成渲染树(Render Tree)
• 回流（Layout）：得到节点的几何信息（位置，大小）
• 重绘：根据渲染树以及回流得到的几何信息，得到节点的绝对像素
• 呈现

回流和重绘的区别：

• 当布局和尺寸改变时，会发生回流和重绘
• 只有颜色发生变化时，只会发生重绘
• 回流一定会引起重绘，重绘不一定会引起回流

减少回流和重绘

浏览器优化机制

由于每次回流都会造成额外的计算消耗，因此大多浏览器都会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列，进行批处理。
但是，当使用以下属性和方法时，浏览器不得不进行回流以获取最新的布局信息：

• offsetTop、offsetLeft、offsetWidth、offsetHeight
• scrollTop、scrollLeft、scrollWidth、scrollHeight
• clientTop、clientLeft、clientWidth、clientHeight
• getComputedStyle()
• getBoundingClientRect

自己优化

1. 使用cssText一次性增加或者修改多个样式：

 box.style.cssText='background-color:purple;color:white;'

2.利用display：none

由于render tree不会对隐藏的dom元素节点进行渲染，所以我们在批量处理dom元素（比如遍历生成一堆子元素）的时候可以先将其父元素隐藏，然后等处理完后再显示。

3.脱离文档流

回流的触发机制是：布局和尺寸发生改变
因此，我们可以让元素脱离文档流，这种方式可以用在动画元素身上，让其绝对定位。