重绘：
更新了元素的绘制属性，但没有改变布局，重新把元素外观绘制出来的过程叫做重绘。例如更改元素的背景颜色。和重排（回流）相比，重绘省去了布局和分层阶段，所以执行效率比重排（回流）高。
引起重绘的操作：
color border-style visibility text-decoration background-image outline box-shadow
重排（回流）一定触发重绘，重绘不一定触发重排（回流）。
重排（回流）：
更新了元素的几何属性，那么浏览器需要重新计算元素的几何属性，将其安放在正确位置，这个过程叫做重排（回流）。重排（回流）意味着节点的几何属性发生改变，需重新计算并生成渲染树。
重排（回流）需要更新完整的渲染流水线，开销最大。
常见的引起重排（回流）的属性和方法：
任何改变元素位置或者大小的操作(display:none)：
1.添加或删除可见的DOM元素
2.元素尺寸改变
3.内容变化，例如在input中输入文字
4.浏览器窗口尺寸改变
5.设置style属性的值
6.激活CSS伪类
7.查询某些属性或调用某些方法
几何属性：
布局：display float flex…
尺寸：margin,padding,border,width,height
获取布局信息的属性或者方法：
offsetTop, offsetLeft,offsetWidth,offsetHeight,scrollTop,scrollLeft
获取布局信息，并没有改变几何属性怎么会触发重排（回流）？
大多数浏览器都会通过队列化修改并批量执行来优化重排（回流）过程。浏览器将修改操作放到队列里，当到达一个阈值，才清空队列。但是，获取布局信息的操作会强制清空队列。因为队列中，可能会有影响这些值的操作，为了给我们最精确的数据，浏览器会立即重排（回流）+重绘。
范围分为：全局，局部。
性能优化：
1.尽量使用visibility:hidden替换display:none;
visibility:hidden;触发重绘；占据空间；
display:none; 触发重排；不占据空间；
2.避免使用table布局
table布局可能很小一个改变就造成整个table重排。
可用ul li span等标签替代table系列标签生成表格。
3.避免设置多层内联样式
样式层级过多会影响重绘重排效率。
4.动态改变类(className)而不改变样式
5.批量修改DOM:让元素脱离文本流，对其进行多次修改，然后再把元素带回文档。
6.读写操作分离