什么是重绘与重排
- 重绘指更改外观属性而不影响几何属性的渲染；重排也叫回流，指几何属性改变的渲染。
- 注意：JS 获布局相关的属性值时（如：offsetLeft、scrollTop、getComputedStyle等）也会引起回流，因为浏览器需要通过回流计算最新值。
- 回流必将引起重绘，而重绘不一定会引起回流
属性分类
几何属性
几何属性包括布局、尺寸等可用数学几何衡量的属性
布局：display、float、position、list、table、flex、columns、grid
尺寸：margin、padding、border、width、height
外观属性
外观属性包括界面、文字等可用状态向量描述的属性
界面：appearance、outline、background、mask、box-shadow、box-reflect、filter、opacity、clip
文字：text、font、word
如何减少重绘和回流
- dom 离线修改：需要对元素进行复杂的操作时，可以先隐藏使用
display: none;隐藏元素，操作完成后再显示 - 需要创建多个 dom 节点时，使用 DocumentFragment 创建完后一次性的加入文档
- 尽量避免用 table 布局（table 一旦触发回流就会导致 table 里所有的其它元素回流）
- 避免使用 css 表达式，因为每次调用都会重新计算值（包括加载页面）
- 批量修改元素样式：一次性修改完成后再更改元素类名
- 使用 transform 替代绝对定位，因为 tranform 会开启新图层，使用 GPU 进行渲染。如果图片未改变，GPU 可以直接使用缓存来绘制图层，所以很快。类似的 CSS 属性还有 opacity 和 filter
参考资料：
https://juejin.cn/book/6850413616484040711/section/6850413616559194119
https://blog.csdn.net/duola8789/article/details/79237553