重排——回流：当DOM的变化影响了元素的几何信息（Dom对象的位置和尺寸大小），浏览器需要重新计算元素的几何属性，将其安放在界面种的正确位置，这个过程叫做重排.
触发条件：
1.添加或者删除可见的Dom元素
2.元素尺寸改变——边距、填充、边框、宽度和高度变化
重排优化性能建议：
1.分离读写操作：使用absolute或者fixed使元素脱离文档流
2.最小化重绘和重排：样式集中修改
3.缓存需要修改的Dom或批量操作Dom
4.开启GPU加速（会导致内存占用较大，会有性能问题，动画结束而未关闭硬件加速，还可能产生字体模糊）
重绘——当一个元素的外观发生变化，但没有改变布局，重新把元素外观绘制出来的过程，叫做重绘,将渲染树的每个节点转换为屏幕上的实际像素，这个阶段中
触发重绘：
改变元素的color，background.box-shadow
另外：
引起回流：
- 页面首次渲染
- 浏览器窗口大小发生改变
- 元素尺寸或位置发生改变（外边距，内边距，边距大小，高低和宽度）
- 元素内容变化（文字数量或图片大小等等）
- 元素字体大小变化
- 添加或者删除可见的DOM元素
- 激活CSS伪类（例如：:hover）
- 查询某些属性或调用某些方法
引起回流的属性和方法：(获取布局信息的操作，会强制刷新浏览器的操作队列，触发回流重绘来返回正确的值)
-
clientWidth、clientHeight、clientTop、clientLeft
-
offsetWidth、offsetHeight、offsetTop、offsetLeft
-
scrollWidth、scrollHeight、scrollTop、scrollLeft
-
scrollIntoView()、scrollIntoViewIffNeeded()
-
getComputedStyle()
-
getBoundingClientRect()
-
scrollTo()
如何减少回流
- css
- 避免使用table布局;
- 尽可能在DOM树的最末端改变class;
- 避免设置多层内联样式;
- 将动画效果应用到position属性为absolute或fixed的元素上;
- 避免使用CSS表达式（例如：calc()）。
- JS
- 避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。
- 避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。
- 也可以先为元素设置display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。
- 避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。
- 对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。
脱离文档流的方式：
隐藏元素，应用修改，重新显示
使用文档片段，在当前DOM之外构建一个子树，再把它拷贝会文档中
将原始元素拷贝到一个脱离文档的节点中，修改节点后，再替换原始的元素。
对于复杂动画效果，使用绝对定位让其脱离文档流：避免引起父元素以及后续元素频繁的回流
