重排（reflow）和重绘（repaint）
重绘：通过构造渲染树和重排（回流）阶段，我们知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息，接下来就可以把渲染树的每个节点都转换为屏幕上的实际像素，即节点转实际像素，这个阶段叫做重绘
- 当页面中元素样式的改变并不影响它在文档流中的位置时（eg：color、background-color、visibility 等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。
重排（回流）：无论通过什么方式影响了元素的几何信息（元素在视口内的位置和尺寸大小），浏览器需要重新计算元素在视口内的几何属性，这个过程叫做重排
- 当 Render Tree 中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。
如何减少重排和重绘？
- 最小化重绘和重排，比如样式集中改变，使用添加新样式类型
.class
- 批量操作 DOM，比如读取某元素的 offsetWidth 属性存到一个临时变量，再去使用
- 使用 absolute 或 fixed 使元素脱离文档流，这在制作负责的动画时，对性能的影响比较明显
- 开启 GPU 加速，利用 css 属性 transform、will-change 等
- transform 使浏览器为元素创建⼀个 GPU 图层，这使得动画元素在一个独立的层中进行渲染。当元素的内容没有发生改变，就没有必要进行重绘。