1. 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(其实我觉得叫重新布局更简单明了些)。每个页面至少需要一次回流，就是在页面第一次加载的时候。
2. 当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
注：从上面可以看出，回流必将引起重绘，而重绘不一定会引起回流。
任何对render tree中元素的操作都会引起回流或者重绘，比如
1. 添加、删除元素(回流+重绘)
2. 隐藏元素，display:none(回流+重绘)，visibility:hidden(只重绘，不回流)
3. 移动元素，比如改变top,left(jquery的animate方法就是,改变top,left不一定会影响回流)，或者移动元素到另外1个父元素中。(重绘+回流)
4. 对style的操作(对不同的属性操作，影响不一样)
5. 还有一种是用户的操作，比如改变浏览器大小，改变浏览器的字体大小等(回流+重绘)
1.1 重绘
重绘是指页面中某些元素发生了不影响布局的变化时（如颜色改变），浏览器重新绘制的过程。此时由于只需要UI层面的重新像素绘制，因此损耗较少。 仅仅 引发重绘的操作如下所示（注意：回流必定触发重绘，但是重绘不一定触发回流）：
1）改变背景色；
2）改变文字颜色；
3）改变边框颜色；
通过visibility:hidden隐藏元素；
……
1.2 回流
回流是指页面中某些元素发生变化而影响了布局时（如尺寸、位置改变），浏览器需要重新布局并绘制的过程。引发回流的操作如下所示：
1）页面初次渲染；
2）浏览器窗口大小改变；
3）元素尺寸、位置、内容发生改变；
4）元素字体大小变化；
5）添加或者删除可见的 dom 元素；
5）激活 CSS 伪类（例如：:hover）；
6）查询某些属性或调用某些方法：
clientWidth、clientHeight、clientTop、clientLeft
offsetWidth、offsetHeight、offsetTop、offsetLeft
scrollWidth、scrollHeight、scrollTop、scrollLeft
getComputedStyle() ：Window.getComputedStyle()方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。
getBoundingClientRect()
scrollTo()：scrollTo() 方法可把内容滚动到指定的坐标。
1.3 减少回流和重绘
1.3.1 浏览器自身优化策略
由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列。当你获取布局信息的操作的时候，会强制队列刷新，比如访问以下属性或者使用以下方法：
offsetTop、offsetLeft、offsetWidth、offsetHeight
scrollTop、scrollLeft、scrollWidth、scrollHeight
clientTop、clientLeft、clientWidth、clientHeight
getComputedStyle()
getBoundingClientRect
以上属性和方法都需要返回最新的布局信息，因此浏览器不得不清空队列，触发回流重绘来返回正确的值。因此，在修改样式的时候，最好避免使用上面列出的属性，它们都会刷新渲染队列。如果要使用它们，最好将值缓存起来。
另一优化就是浏览器认为position为absolute或fixed的元素更改只会影响其本身和子元素，而static的元素变化则会影响之后的所有元素。原因在于absolute和fixed认为元素从文档流中清除了，怎么操作是内部的事。例如：对于复杂动画效果，使用绝对定位让其脱离文档流
1.3.2 多次操作变为一次操作
不要一条一条的修改DOM的样式，尽量使用class进行样式修改。
把DOM离线修改（批量修改DOM）
1）使用documentFragment对象在内存里操作DOM
2）先把DOM给display：none，修改完毕再显示出来
3）clone一个DOM节点到内存里，然后想怎么改就怎么改，改完后，和在线的那个的交换一下。
1.3.3 其它
使用css3硬件加速，可以让transform、opacity、filters（滤镜）这些动画不会引起回流重绘（注意：对于动画的其它属性，比如background-color这些，还是会引起回流重绘的，不过它还是可以提升这些动画的性能）
不要把DOM结点的属性值放在一个循环里当成循环里的变量。不然这会导致大量地读写这个结点的属性。
千万不要使用table布局。因为可能很小的一个小改动会造成整个table的重新布局。
HTML 、 CSS 、 JavaScript 数据，经过浏览器中间渲染模块的处理，再加上 重排 、 重绘 、 合成 的一个个环节，才最终输出为屏幕上的 像素 视图画面。本文就逐一介绍 重排 、 重绘 、 合成 的基本概念、触发时机、影响范围以及其优化策略。
一个完整的渲染流程一般都经历如下过程：
定义： 当通过JS或css改变了元素的宽度、高度等，修改了元素的几何位置属性，那么浏览器会触发重新布局，解析之后的一系列子阶段，这个过程就叫 重排 。无疑， 重排需要更新完整的渲染流水线，所以开销也是最大的。
触发时机和影响范围： DOM节点信息更改,触发重排时，这个DOM更改程度会决定周边DOM更改范围。
全局范围： 就是从根节点html开始对整个渲染树进行重新布局，例如当我们改变了窗口尺寸或方向或者是修改了根元素的尺寸或者字体大小等。
局部范围： 对渲染树的某部分或某一个渲染对象进行重新布局。
定义： 如果修改了元素的背景颜色，并没有引起几何位置的变换，所以就直接进入了绘制阶段，然后执行之后的一系列子阶段，这个过程就叫 重绘 。 相较于重排操作，重绘省去了布局和分层阶段，所以执行效率会比重排操作要高一些。
触发时机和影响范围： 每一次的dom更改或者css几何属性更改，都会引起一次浏览器的重排/重绘过程，而如果是css的非几何属性更改，则只会引起重绘过程。
定义： 合成是一种将页面的各个部分分离成层（Layer Tree），分别将它们栅格化，然后在称为“合成线程”的中组合为页面的技术。
触发时机和影响范围： 在GUI渲染线程后执行，将GUI渲染线程生成的绘制列表转换为位图,然后发送绘制图块命令 DrawQuad 给浏览器进程，浏览器进程根据 DrawQuad 消息生成页面，将页面显示到显示器上
优点： 我们使用了 CSS 的 transform 来实现动画效果，避开了 重排 和 重绘 阶段，直接在非主线程上执行合成动画操作。这样的效率是最高的，因为是在非主线程上合成，并没有占用主线程的资源，另外也避开了布局和绘制两个子阶段，所以相对于重绘和重排，合成能大大提升绘制效率。
重排 一定会引起 重绘 ，而 重绘 不一定会引起 重排 ， 重绘 的开销较小， 重排 的代价较高。在日常开发过程中应该尽量减少 重排 和 重绘 操作。
欢迎访问： 天问博客
