第一模块（课程信息）:
课程名称: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 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦