【九月打开】第14天 重绘repaint和重排reflow有什么区别？

第一模块（课程信息）:

课程名称:2周刷完100道前端优质面试真题
课程章节:第六章第二十节 重绘repaint和重排reflow有什么区别？
主讲老师:双越

第二模块（课程内容）:

课程内容概述

重绘repaint：

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

重排reflow：

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

区别：

• 重排比重绘影响更大，消耗也更大
• 要避免无意义的重排

减少重排的方法

1. 集中修改css样式
2. 修改之前先设置display:none，脱离文档流
3. 使用BFC特性，不影响其他元素位置
4. 频繁触发使用节流和防抖
5. 使用createElementFragment批量处理DOM
6. 优化动画，使用css3和requestAnimationFrame

拓展：BFC

7. 根节点;
8. float:left/right;
9. overflow:auto/scroll/hidden;
10. display:inline-block/table/table-cell/table-row;
11. display:flex/grid; 直接子元素
12. display:absolute/fixed;

第三模块（学习心得）：

• 更加全面的学习了repaint和reflow的区别
• 在开发过程中尽量减少重排
• 减少重排的方法

第四模块（学习截图）：