为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【九月打开】第14天...

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

2022.09.20 16:48 53浏览

第一模块(课程信息):

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

第二模块(课程内容):

课程内容概述

重绘repaint:

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

重排reflow:

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

区别:

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

减少重排的方法

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

拓展:BFC

  1. 根节点;
  2. float:left/right;
  3. overflow:auto/scroll/hidden;
  4. display:inline-block/table/table-cell/table-row;
  5. display:flex/grid; 直接子元素
  6. display:absolute/fixed;

第三模块(学习心得):

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

第四模块(学习截图):

图片描述
图片描述
图片描述
图片描述

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
9
获赞与收藏
4

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

50篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

146篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消