理解：重绘 与 回流/重排的过程

前言：重绘 与 回流 / 重排 是由于浏览器的再次渲染所引起的一个话题，所以我们需要先了解浏览器的渲染过程；
一个前端页面无非就是有html、css、JavaScript组成的。

通常来说，渲染引擎会解析HTML文档来构建DOM树

与此同时，渲染引擎也会用CSS解析器解析CSS文档构建CSSOM树（CSS对象模型）

接下来，DOM树和CSSOM树关联起来构成渲染树（RenderTree），这一过程称为Attachment。

然后浏览器按照渲染树进行布局（Layout），最后一步通过绘制显示出整个页面。
 

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流(reflow)，也叫重排。

每个页面至少需要一次 回流（重排），就是在页面第一次加载的时候。

在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。
 

注意：回流必将引起重绘，而重绘不一定会引起回流。回流会导致渲染树需要重新计算，开销比重绘大，所以我们要尽量避免回流的产生

回流的产生：
1.页面第一次渲染 在页面发生首次渲染的时候，所有组件都要进行首次布局，这是开销最大的一次回流。
2.浏览器窗口尺寸改变
3.元素位置和尺寸发生改变的时候
4.新增和删除可见元素
5.内容发生改变（文字数量或图片大小等等）
6.元素字体大小变化。
7.激活CSS伪类（例如：:hover）。
8.设置style属性
9.查询某些属性或调用某些方法。比如说：
offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight
除此之外，当我们调用getComputedStyle方法，或者IE里的currentStyle时，也会触发回流，原理是一样的，都为求一个“即时性”和“准确性”。

重绘的产生：
当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如visibility、outline、背景色等属性的改变。

因为 JavaScript 可以同时修改 DOM 和 CSSOM。
由于浏览器不确定特定的JavaScript会做什么，所以它采取的预防措施是停止整个DOM构造，一般情况我们会将JavaScript放到页面的底部，等页面要渲染结束再引进来，JavaScript是影响回流和重绘的关键。