回流和重绘

最新推荐文章于 2025-06-11 08:40:28 发布
最新推荐文章于 2025-06-11 08:40:28 发布
阅读量229 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 性能优化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Null_Bugs/article/details/103035562
本文深入探讨了浏览器渲染过程中的重绘与回流概念，解释了它们如何影响JavaScript性能，以及如何通过优化CSS和DOM操作减少不必要的重绘与回流，提升网页渲染效率。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

理解浏览器的重绘和回流

css性能能让javascript变慢？

频繁触发重绘与回流，会导致UI频繁渲染，最终导致js变慢

回流：当render tree 中的一部分（全部）因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流。

当页面布局和几何属性改变时就需要回流

重绘：当render tree 中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局，比如background-color

回流一定会引起重绘，但是重绘不一定引起回流

触发页面布局的属性

 盒子模型相关属性会触发重布局

 定位属性及浮动也会触发重布局

  改变节点内部文字结构也会触发重布局

 

将频繁重绘回流的DOM元素单独作为一个独立的图层，那么这个DOM的重绘和回流只会影响这一个图层

 

 

前端 Interview - 回流和重绘，如何避免？
一个平平无奇的程序媛
12-02 836
在前端性能优化中，我们经常提到的两个概念 回流 和 重绘，今天我们详细来说说，什么是回流、重绘？什么情况下会触发回流或重绘？如何避免？
【前端知识之CSS】回流和重绘
weixin_44337386的博客
05-17 613
本系列主要整理前端面试中需要掌握的知识点。本节介绍回流和重绘以及什么时候会触发。
回流与重绘：CSS性能让JavaScript变慢？
莱茵金属
04-17 1238
目前有有关此文章的介绍（这里），但是只是部分内容。本文为全文翻译，并提供其他的一些页面性能优化方面的资源，希望能对reflow的进一步认识有所帮助。我之前还翻译过一篇关于reflow的文章，您有兴趣可以看看（点击这里）。 原文地址：http://www.stubbornella.org/content/2009/03/27/reflows…-slow/ 原作者：Nicole Sullivan
回流与重绘
GW05431的博客
01-21 1610
浏览器会将所有的回流、重绘的操作放在一个队列中，当队列中的操作到了一定的数量或者到了一定的时间间隔浏览器就会对队列进行批处理。这样就会让多次的回流、重绘变成一次回流重绘。当触发回流时，一定会触发重绘，但是重绘不一定会引发回流。1.回流与重绘的概念及触发条件。2.如何避免回流与重绘?
什么是重绘（Repaint）和回流（Reflow）？如何优化？
最新发布
破损的天堂鸟博客
06-11 1122
1. 重绘（Repaint）定义：当元素的外观属性（如颜色、背景、可见性等）发生变化，但不影响其在文档流中的布局和几何尺寸时，浏览器会重新绘制该元素，此过程称为重绘。触发条件修改颜色、背景色、边框颜色、透明度、阴影等非几何属性。修改visibility属性（如性能影响：重绘不涉及布局计算，因此开销较小。2. 回流（Reflow / Layout）定义：当元素的布局、几何属性（尺寸、位置、结构）发生变化时，浏览器需重新计算所有受影响元素的几何信息，并更新渲染树，此过程称为回流。触发条件。
HTML回流和重绘.md
06-13
HTML回流和重绘
HTML中的重绘与回流
01-08
在认识重绘和回流之前，我们先认识一下一个页面加载的时候，会发生什么？ 　页面加载时，生成一个DOM树，DOM Tree里包含了构成页面所有的标签。Style Sheets（CSS样式表）会生成一个Style Rules。当DOM Tree和Style ...
JS动画 与 CSS3动画 及 回流和重绘
YuLong的博客
11-14 2301
文章目录JS动画CSS3动画浏览器的渲染流程回流(重排) 和 重绘 JS动画 JS动画：也被称为 逐帧动画，在时间帧上绘制内容，一帧一帧的，所以它的可再造性很高，几乎可以完成任何想要的动画形式。 缺点： 有可能造成丢帧的情况。JavaScript在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等，对其干扰导致线程可能出现阻塞，从而造成丢帧。 代码的复杂度高于CSS动画。 优点： JavaScript动画控制能力很强，可以在动画播放过程中对动画进行控
回流和重绘的区别
03-19
### 浏览器渲染中的回流与重绘 #### 回流（Reflow） 回流是指当 DOM 的结构或元素的几何属性（如大小、位置等）发生变化时，浏览器需要重新计算这些元素的位置和尺寸，并更新整个页面布局的过程。这一过程通常涉及多个节点的重新计算以及可能引发后续子树的调整[^1]。 例如，如果动态改变了某个元素的高度或者宽度，或者是隐藏了一个可见的元素，则会触发回流操作。每次回流都会带来一定的性能开销，尤其是复杂的布局场景下更为显著[^5]。 #### 重绘（Repaint） 相比之下，重绘指的是由于某些视觉样式的更改而不需要改变文档流的情况下发生的绘制行为。比如颜色的变化、背景图片替换等情况只会导致像素级别的刷新而不影响整体布局结构[^3]。 需要注意的是，尽管单独来看重绘似乎比回流轻量级一些，但如果频繁发生也可能累积成较大的性能瓶颈[^2]。 #### 主要区别 | 特性 | 回流 | 重绘 | |--------------|-------------------------------|-------------------------| | **定义** | 布局变化引起的重新计算 | 只有外观上的变动 | | **触发条件** | 修改了影响布局的因素 | 改变了不影响布局的样式 | | **范围** | 影响较大 | 较小 | | **频率控制** | 应尽量减少 | 同理需加以管理 | 为了提升网页加载速度并改善用户体验，在开发过程中应当采取措施来降低不必要的回流和重绘事件的发生几率。可以通过批量处理DOM变更动作、使用虚拟dom技术等方式实现优化目的；另外还可以考虑采用GPU加速特性明显的 CSS 属性如 `transform` 和 `opacity`, 这些不会引起常规意义上的reflow/repaint流程而是交由更高效的图形处理器完成相应工作[^4]。 ```javascript // 减少回流的一个例子：先移除元素再做多次修改最后放回去 let parentElement = document.getElementById('parent'); let childToModify = document.createElement('div'); childToModify.style.width = '200px'; childToModify.style.height = '200px'; childToModify.style.backgroundColor = '#ff0000'; parentElement.appendChild(childToModify); ``` 上述代码展示了如何通过创建新节点而非直接操作现有DOM节点的方式来避免连续性的回流问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值