一、介绍
CSS中的回流与重绘是指当HTML或CSS节点发生变化时，浏览器重新绘制和展示页面的过程。回流和重绘会导致浏览器性能降低，应尽量减少。
二、浏览器解析页面的流程
浏览器解析页面主要分为以下的流程：
1.解析HTML，形成HTML DOM树
2.解析CSS，生成CSS规则树
3.将HTML DOM树与CSS规则树结合（attachment），生成Render树
4.布局Render树（layout/reflow），负责各元素大小、位置的计算
5.绘制Render树（painting），绘制页面像素信息
6.浏览器将各层信息发送给GPU，GPU将各层合成，显示在屏幕上
三、回流与重绘的发生阶段
当HTML或CSS发生变化的时候，就会导致浏览器重新解析HTML DOM树和CSS状态树，导致了重新布局（layout）和渲染（repaint）。
· 回流：即为layout或reflow，指重新进行布局。一般意味着元素的大小、位置、结构、内容、字体大小等发生了变化，需要重新解析。
· 重绘：即为repaint，指重新进行绘制，当页面元素样式的改变不影响元素在文档流中的位置时。一般是元素的颜色、背景颜色等外观发生变化，需要重新解析。
回流的成本高于重绘，因为只要是回流就意味着必须重绘。
四、一些优化方案
1.避免逐项更改样式，使用class类对样式进行统一更改，减少回流。
2.避免循环操作DOM。
3.尽量避免多次获取offsetXXX、scrollXXX、clientXXX等属性，如果不能避免则用变量保存来尽量减少回流。
4.动画效果应用于position为absolute或fixed的元素上，动画因为脱离文档流，减少回流与重绘。
5.为动画开启GPU加速，开启css3动画加速的本质是渲染元素图层在GPU中 transform 属性不会触发重绘。所以尽量使用 transform: translate() 代替left与top进行动画。