这三个概念最好配合了解浏览器如何渲染页面进行理解和记忆以下这篇文字写的极好，就是标题略微离谱

一、回流

又称重排，正如其名，当DOM结构的修改引发DOM几何尺寸变化时，就会触发回流
其会重新计算DOM的布局，并重新绘制页面

触发回流的操作

• DOM的几何属性发生变化width,height,padding,margin,left,top/right/bottom/left,border
• DOM节点发生增删
• 读写offset族，scroll族，client族属性
• 调用window.getComputedStyle(),window.scrollTo(),Element.getBoundingClientRect()方法

  回流的影响

  触发回流时，浏览器会重新渲染DOM树，并将浏览器渲染页面之后的流程重新执行一次，这会加大性能上的损耗
  

  二、重绘

  当元素的样式发生改变并不影响其几何尺寸和布局位置时，浏览器会将新样式赋予给元素并重新绘制该元素，这个过程就叫重绘

  重点：回流必定造成重绘（因为回流比重绘多一个重新计算布局的过程）

触发重绘的操作

• 元素部分样式属性发生改变color,background-color,visibility

  重绘的影响

  由于没有造成DOM几何属性的变化，从而省去布局的过程，只需要重新计算样式即可跳至绘制页面
  

  三、合成

  浏览器中还存在一种情况：如果发生更改后，既不需要布局也不需要绘制，那么会执行绘制页面中的合成操作
  这是由于CSS3的GPU加速，CSS3中transform,opacity,filter这些属性属性的更改只会触发合成，而不会触发回流与重绘

  原理 由于这三个属性常用于CSS动画的制作，因此若不进行优化会时常造成回流与重绘，造成大量性能的损失 因此拥有这三个属性的元素会形成独立一个合成层的图层，并将其发生的改动交由GPU合成 优势

  1. 充分发挥GPU优势，合成线程生成位图的过程中会调用线程池，并在其中使用GPU进行加速生成，而GPU 是擅长处理位图数据的，这比一般的CPU处理快很多
  2. 独立的图层也不会对其它层造成影响，只需要处理自身
  3. 没有占用主线程的资源，即使主线程卡住了，效果依然流畅展示