浏览器重绘和重排

重排

重绘/回流：当dom元素改变了几何信息的变化，造成布局发生改变，浏览器需要重新计算元素的几何属性，这个过程叫做重排
触发情况：

• 添加、删除、更新dom节点
• display: none隐藏一个dom节点
• 用户更改窗口大小，放大、缩小、或者滚动

重绘

重绘/回流：当dom元素的外观发生了变化，没有发生几何变化的时候，浏览器会重新将dom元素的外观绘画出来，这个过程叫做重绘
只要改变外观的都必定引起重绘，有一条比较特殊的是visibility: hidden虽然隐藏了元素，但是元素所占的位置还在，所以不会重排，但是会重绘

关系

元素外观的变化，不会引起浏览器的重新布局，但是浏览器一旦重新布局的话一定会重新绘制受影响的部分，所以对于浏览器来说 重排一定会引起重绘、重绘不一定引起重排
在不可避免的情况下，优先选择重绘，减少使用消耗更大的重排

如何避免

不过是重绘还是重排都是一种损耗，我们应该尽可能的减少这两种现象的发生

• 集中改变样式
• fixed 或 absoult 的 position会减少该dom对象对其他元素布局的影响
• 不使用table布局，避免一个小的改动引起整个table的布局变化
• 动画开始GPU加速，translate使用3D变化
• 提升为合成层