当前位置: 首页 > article >正文

你不知道的《回流与重绘》那些事儿

1.回流(Reflow)

        回流是指当网页中的元素的布局发生变化时,浏览器需要重新计算元素的位置和大小。任何影响页面布局的操作,比如改变元素的尺寸、位置、隐藏/显示元素,或者调整字体大小、窗口尺寸等,都会触发回流。

回流的开销比较大,因为它会导致页面的重新布局,影响整个页面甚至是整个文档的渲染。

触发回流的操作包括:

  • 改变窗口的大小。
  • 修改元素的宽高、边距(margin)、填充(padding)、边框(border)等样式属性。
  • 添加或删除 DOM 元素。
  • 改变元素的字体大小或文本内容。
  • 设置 display: none(隐藏元素,触发回流)。

2.重绘(Repaint) 

重绘是指当元素的外观(比如颜色、背景、边框等)发生变化时,浏览器会重新绘制这些元素。相比回流,重绘的开销相对较小,因为它不涉及元素的布局重新计算,只需更新外观。

触发重绘的操作包括:

  • 改变元素的颜色(比如 colorbackground-color)。
  • 改变元素的透明度(比如 opacity)。
  • 改变元素的边框颜色。

3.总结

回流的重点在于“流”,倾向于结构的调整,对于性能影响更大。

重绘的重点在于“绘”,倾向于样式的调整,对于性能影响较小。

回流一定会触发重绘,而重绘不一定会回流。

 

4.性能优化建议:

  • 避免频繁操作 DOM,可以通过批量更新 DOM,或使用 DocumentFragment 进行 DOM 操作。
  • 减少回流的触发,例如在改变样式时尽量避免逐一更改每个属性,可以使用 class 一次性改变多个样式属性。
  • 使用 CSS3 动画,它们通常不触发回流或重绘,性能会更好。

原文地址:https://blog.csdn.net/weixin_51943308/article/details/142127744
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.kler.cn/a/299668.html

相关文章:

  • 双指针(8)_单调性_四数之和
  • 硅外延片行业分析:未来几年年复合增长率CAGR为5.3%
  • uniapp中scroll-view标签
  • 【Unity3D】如何用MMD4Mecanim插件将pmx格式模型转换为fbx格式模型
  • 分布式通信:多计算平台的任务分配
  • IP包头的总长度字段和UDP包头的长度字段之间的关系
  • 深入掌握Go语言中的正则表达式与字符串处理
  • 概率生成模型(Generative Models)和概率判别模型(Discriminative Models)
  • 什么情况?苹果、谷歌同时败诉
  • 面试—Redis
  • Linux驱动(六):Linux2.6驱动编写之平台设备总线
  • SLMi33x系列SLMi330HCG-DG具有主动保护功能 兼容光耦的单通道带保护功能的隔离驱动器
  • 【mysql】mysql之主从延迟复制测试场景
  • Vue3封装table表格右键菜单功能
  • QQueue调用dequeue闪退解决方法
  • CentOS 7.9安装GCC 7.3.0
  • 四款音频剪辑软件免费使用,你更pick哪一个?
  • 第三天旅游线路预览——从贾登峪到禾木风景区入口
  • 动手学深度学习(pytorch土堆)-03Transforms简单入门学习
  • 代币化资产如何拯救 DeFi:让金融重回价值创造的正轨