重绘、重排、图层简单概念

重排 --> Reflow --> 位置改变

重绘 --> Repaint --> 外观改变

图层分类

• 具有3D变换的css属性
• 标签
• 标签
• css3动画节点
• css加速属性 --> will-change

重绘、重排、图层关系

• 重绘、重排都是以图层为单位，只有图层中任何一个元素发生改变，整个图层就要进行重绘或者重排
• 重绘不一定重排，重排大概率会导致重绘

重排成本比较高的操作

• 增加、删除、修改DOM节点
• 移动DOM
• 修改css
• resize窗口
• 修改默认字体
• 获取某些属性（width，height）

使用display:none和visibility:hidden区别

• display:none是不占位的隐藏，因此涉及到重排和重绘
• visibility:hidden是占位的显示和隐藏，因此只涉及到重绘

重绘重排优化方案

• 用transform代替top，left
• 使用opacity代替visibility（opacity配合图层，可以不重绘，不重排）
• 不使用table布局
• 多次改变样式属性的操作合并成一次操作
• 将DOM离线之后再修改
• 利用文档碎片（Vue）
• 不要把获取某些DOM节点的属性放在一个循环中当成循环的变量