回流和重绘

回流（必定产生重绘）
渲染树中的元素因尺寸、布局、显隐的改变重新构建，产生回流
每页至少需一次回流（加载时）
发生时，渲染树中受影响的部分（和后面的元素）被重新构造

1. 调整窗口的大小
2. 改变字体，如果用rem 设置了根目录的字体大小，这样就减少了回流的次数
3. 增加或者移除样式表
4. 内容的变化，用户在input中输入了文字（这是不可避免的）
5. 激活CSS的伪类
6. 操作class属性
7. 基本操作DOM(包括js中的domcument等)
8. 计算offsetWidth与offsetHeight 属性，获取元素在窗口中的位置
9. 在html代码中直接设置 style 属性的值，这个降低了代码的利用率，还影响性能

重绘（不一定产生回流）
渲染树中的元素更新不影响布局和尺寸的可见属性（background、visibility）等时，产生重绘

如何减少
减少对渲染树的操作（合并多次多DOM和样式的修改）和对一些style值的请求

1. 对尺寸、布局改动频繁的元素abosolute或fixed定位，使之脱离渲染树
2. 样式表放在head标签中，脚本放在body结束前。
3. 避免多次获取、操作dom节点
4. 修改元素的class而不是直接操作样式

例子
top/left是布局类的样式，这个样式的变化会导致回流 - 即指对这些节点以及受这些节点影响的其它节点，进行CSS计算->布局->重绘过程，这个过程的前2步是消耗大量资源的
translate导致重绘- 即在屏幕上重新画一下，不会进行CSS计算和布局这2个性能大户，所以我们认为translate性能上要明显好于top/left