前端的回流和重绘
1. 回流
回流又称之为重排，当Render Tree中的一部分（或者全部）因元素的规模，尺寸，布局等改变，而需要重新构建页面，就会触发回流
具体总结为：
- 页面初始渲染
- 添加、删除可见的DOM元素
- 改变元素位置，尺寸，内容
触发回流的属性：
- 盒子模型相关属性：width、height、display、border、border-width…
- 定位及浮动：position、left、right、top、bottom、float、padding、margin…
- 文字相关：text-align、overflow、font-weight、font-family、line-height，vertical-align、font-size、white-space…
2. 重绘
当Render Tree中的一些元素需要更新属性，而这些属性只是影响到元素的外观，风格而不影响布局，就会触发重绘
触发重绘的属性：
color、border-style、border-radius、outline、visibility、background-color、text-decoration、background、background-image、box-shadow…
回流一定重绘，但是重绘不一定回流
3.如何减少回流和重绘
- 用translate代替top
- 用opacity代替visibility
- 预先定义好className，然后统一修改Dom的className
- 不要把Dom结点的属性值放在一个循环里面变成循环变量
- 让要操作的元素进行“离线处理”，处理完后一起更新
