前端重绘重排

重绘

元素外观改变，如颜色、背景色
但是元素的尺寸、定位不变、不会影响其他元素的位置

重排

重新计算尺寸和布局，可能会影响其他元素的位置
如元素高度的增加，可能会使相邻元素位置下移

两者之间的区别

重排比重绘要影响更大，消耗也更大
所以，要尽量避免无意义的重排

减少重排的方法

集中修改样式，或直接切换 css class
修改之前先设置display： none，脱离文档流
使用BFC特性，不影响其他元素的位置

频繁触发，使用节流和防抖
使用创建DOM标签， 批量操作DOM，事件委托
优化动画，使用CSS3和requestAnimationFrame

BFC

块级格式化上下文
内部的元素无论怎么改动，都不会影响其他元素的位置

触发BFC的条件

float: left/right
overflow: auto/hidden/scroll
display: inline-block/table/table-cell
display: flex/grid的直接子元素
position: absloute/fixed