第一模块（课程信息）:
课程名称:2周刷完100道前端优质面试真题
课程章节:第六章第二十节 重绘repaint和重排reflow有什么区别？
主讲老师:双越
第二模块（课程内容）:
课程内容概述
重绘repaint：
- 元素外观改变，如颜色、背景色
- 但元素的尺寸、定位不变，不会影响其他元素的位置
重排reflow：
- 重新计算尺寸和布局，可能会影响其他元素的位置
- 元素位置增加，会使相邻元素往下移
区别：
- 重排比重绘影响更大，消耗也更大
- 要避免无意义的重排
减少重排的方法
- 集中修改css样式
- 修改之前先设置display:none，脱离文档流
- 使用BFC特性，不影响其他元素位置
- 频繁触发使用节流和防抖
- 使用createElementFragment批量处理DOM
- 优化动画，使用css3和requestAnimationFrame
拓展：BFC
- 根节点;
- float:left/right;
- overflow:auto/scroll/hidden;
- display:inline-block/table/table-cell/table-row;
- display:flex/grid; 直接子元素
- display:absolute/fixed;
第三模块（学习心得）：
- 更加全面的学习了repaint和reflow的区别
- 在开发过程中尽量减少重排
- 减少重排的方法
第四模块（学习截图）：
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦