回流（reflow）和重绘（repaint）

回流：

当我们对 DOM 的修改，引发了 DOM几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。这个过程就是回流（也叫重排）；

重绘：

当我们对 DOM 的修改，导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式（跳过了上图所示的回流环节）。这个过程叫做重绘；

会导致回流的操作：

1.页面首次渲染
2.浏览器窗口大小发生改变
3.元素尺寸或位置发生改变
4.元素内容变化（文字数量或图片大小等等）
5.元素字体大小变化
6.添加或者删除可见的DOM元素
7.激活CSS伪类（例如：:hover）
8.查询某些属性或调用某些方法

俩者区别：

1.回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流。
2.当页面布局和几何属性改变时就需要回流，比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变。

尽量减少回流和重绘，那么怎样优化浏览器渲染过程？

其实优化就是减少对render tree的操作，并减少对一些style信息的请求，尽量利用好浏览器的优化策略。

1.不要1个1个改变元素的样式属性，最好直接改变className，但className是预先定义好的样式，不是动态的，如果你要动态改变一些样式，则使用cssText来改变

2.DOM的增删行为 让操作元素离线处理，即使用documentFragment或div等元素进行缓存操作，先把所有要添加到元素添加到1个div，最后才把这个div
append到body中

3.先display:none 隐藏元素，然后对该元素进行所有的操作，最后再显示该元素。因对display:none的元素进行操作不会引起回流、重绘。

4.将引起回流的属性赋值给变量，进行缓存，需要用到的时候直接使用变量就行。例如获取一个元素的scrollTop、scrollLeft、scrollWidth、offsetTop、offsetLeft、offsetWidth、offsetHeight之类的属性，浏览器为了保证值的正确也会回流取得最新的值，所以如果你要多次操作，最取完做个缓存。

5.减少操作影响的节点，影响的节点越多，则越消耗性能。