重绘和重排.md

首先动态网页随时都会触发重绘、重排，比如网页动画、弹窗、点击增加/删除/隐藏一个元素

重绘

元素外观改变，元素尺寸定位不变，不会影响到其他元素的位置

重排

重新计算尺寸和布局，可能会影响到其他元素的位置

元素高度和宽度的增加，会让相邻元素下移

区别

重排比重绘影响更大，消耗也更大

应该较少无意义的重排

优化措施

1. 集中修改css样式，或者直接修改class
2. 修改之前设置display:none，脱离文档流，修改完之后再设置display:block加入到文档流中
3. 使用 BFC 特性，只修改内部元素，不影响其他元素位置
4. 频繁触发的使用节流和防抖
5. 使用文档碎片方法createDocumentFragment批量操作 DOM，将多个dom放在一个div容器中，只触发一次重排
6. 优化动画，使用 CSS3和requestAnimationFrame,触发浏览器动画优化机制及 GPU 加速

关于 BFC

Block Format Context,块级格式化上下文

特性:内部元素无论如何改动，都不会影响其他元素的位置

触发条件：

1. 根节点html
2. float:left/right 浮动
3. overflow:auto/scroll/hidden滚动
4. display:inline-block/table/table-row/table-cell
5. display:flex/grid的直接子元素
6. postion:absolute/fixed定位