第一模块（课程信息）:
课程名称: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的区别
- 在开发过程中尽量减少重排
- 减少重排的方法
第四模块（学习截图）：
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí)，寫(xiě)下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會(huì)繼續(xù)努力的～
掃碼打賞，你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶(hù)
支付方式
打開(kāi)微信掃一掃，即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得
100積分直接送
付費(fèi)專(zhuān)欄免費(fèi)學(xué)
大額優(yōu)惠券免費(fèi)領(lǐng)