回流和重绘

本文深入探讨了浏览器渲染过程中的重绘与回流概念,解释了它们如何影响JavaScript性能,以及如何通过优化CSS和DOM操作减少不必要的重绘与回流,提升网页渲染效率。

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

理解浏览器的重绘和回流

css性能能让javascript变慢?

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

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

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

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

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

触发页面布局的属性

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

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

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

 

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

 

 

### 浏览器渲染中的回流 #### 回流(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、付费专栏及课程。

余额充值