什么是重排.重绘，如何减少重排

最新推荐文章于 2025-06-25 11:10:14 发布
原创 最新推荐文章于 2025-06-25 11:10:14 发布 · 491 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

本文详细阐述了Web开发中重绘（元素外观改变但不涉及布局）与回流（DOM结构变化导致元素几何信息更新）的区别，探讨了重排必定引发重绘但反之不一定，以及列举了触发重排的各种场景和避免重排与提升性能的技巧，如使用`createElementFragment`和GPU加速。

重绘
当一个元素的外观发生改变，但没有改变布局，重新把元素外观绘制出来的过程，所以重绘跳过了创建布局树和分层的阶段。

重排（回流）
当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。

关系
重排需要重新计算布局树，重绘不需要，重排必定发生重绘，但是涉及到重绘不一定要重排。涉及到重排对性能的消耗更多一些。

触发重排的方法
-页面初始渲染，这是开销最大的一次重排 -添加/删除可见的DOM元素 -改变元素位置 -改变元素尺寸，比如边距、填充、边框、宽度和高度等 -改变元素内容，比如文字数量，图片大小等 -改变元素字体大小 -改变浏览器窗口尺寸，比如resize事件发生时 -激活CSS伪类（例如：:hover） -设置 style 属性的值，因为通过设置style属性改变结点样式的话，每一次设置都会触发一次reflow -查询某些属性或调用某些计算方法：offsetWidth、offsetHeight等

避免重排的方式
使用createElementFragment操作dom，最后一起推入文档
样式集中改变 使用class去修改样式
使用 absolute 或 fixed 脱离文档流
使用GPU加速提升网站的动画渲染性能:transform

【高频考点精讲】CSS性能优化实战：减少重排和重绘的10个高效技巧
全栈老李的博客
04-24 601
大家好，我是全栈老李。今天咱们聊点硬核的——CSS性能优化。很多前端同学可能觉得CSS就是写写样式，能跑就行，但真正的高手都知道，CSS写得不好，页面卡成PPT可不是开玩笑的。尤其是重排（Reflow）和重绘（Repaint），这两个家伙简直是性能杀手。
CSS 重排与重绘详解
最新发布
林见鹿鸣
07-30 811
重排和重绘是浏览器渲染页面的必要过程，但过度频繁的操作会严重影响性能。批量处理样式修改，避免零散操作；优先使用transform和opacity实现动画；减少强制重排的场景，合理规划 DOM 结构。通过以上优化，可显著降低页面的性能消耗，提升用户体验，尤其在移动端和复杂交互场景中效果明显。
如何减少重绘和重排
青山不改，绿水长流。
09-27 2044
浏览器会维护1个队列，把所有会引起回流、重绘的操作放入这个队列，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会flush队列，进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。3、当dom元素position属性为fixed或者absolute, 可以通过css形变触发动画效果，此时是不会出发reflow的。2、尽量减少table使用，table属性变化使用会直接导致布局重排或者重绘。4、不要把 DOM 结点的属性值放在一个循环里当成循环里的变量。
DOM的重排与重绘
UUID、
03-04 705
DOM的重排与重绘
循环创建元素时 ES5减少重绘重排的方法
Zero_kuma的博客
10-26 182
代码也很简单就是循环创建N个li 但是这么循环创建会有问题，因为ul这个节点已经在html当中充当一个静态元素了，给这个静态元素不断循环放入li，就会形成10次的重绘重排，会影响性能要尽量减少重绘重排的次数 DOM提供了一个API，【document.createDocumentFragment】 从字面上就很好理解，create创建--document文档--Fragment碎片，创建文档碎片， 它就是一个碎片容器，以本案例为例，也就是说可以把循环出来的 li 交给这个碎片容器，...
减少重绘和重排(重流)
Flora_SM的博客
12-21 796
1. 最小化重绘和重流 由于重绘和重排代价可能较为昂贵，因此最好可以减少它的发生次数。可以合并多次对dom和样式的修改，然后一次处理掉。例如 const el = document.getElementById(‘test’); el.style.padding = ‘5px’; el.style.borderLeft = ‘1px’; el.style.borderRight = ‘2px’; 该例中有3个样式属性被修改了，那么可以采取合并所有的改变然后一次处理。 ※ 方案一：使用cssText（设置
了解重排与重绘
10-16
重排与重绘是Web开发中两个关键的概念，它们直接影响着网页的性能和用户体验。当DOM树中的元素发生变化，浏览器需要更新渲染树以反映这些变化，...通过上述优化技巧，可以有效地减少重排和重绘的开销，使网页更加流畅。
前端性能优化：减少重绘和重排.zip
08-18
史上最全web前端技术全套教程，包括： 前端API集成 前端基础知识 前端开发最佳实践 前端性能优化 前端构建工具 前端框架和库 前端测试工具 前端状态管理 等流行技术的系列教程
高性能JavaScript 重排与重绘(2)
10-23
而通过构建临时字符串再一次性赋值给DOM元素，可以显著减少重排和重绘的次数，提高性能。 浏览器在处理DOM变化时，通常会通过优化技术来减少重排的次数。例如，浏览器会利用队列来延迟执行多次的DOM变化，通过批量...
了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档脱离文档流有哪些方法
wanghe1111_的博客
03-24 1256
了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档脱离文档流有哪些方法
减少重排的方法
qq_54237587的博客
06-25 242
4.css隐藏容器后修改，修改完成再展示，这样只触发两次重排重绘（隐藏一次，展示一次）一次性修改多个，这样可以避免修改一个重排重绘合成一次，减少不必要的性能损耗。transform改变不会触发重排，甚至不会触发重绘，只会触发合成。2.批量修改 DOM（如使用。3.克隆节点后批量修改替换。
如何减少重排和重绘
Zyf14725的博客
02-29 627
重排也叫做回流,简单来说，就是当我们对 DOM 结构的修改引发DOM 几何尺寸变化的时候，会发生回流的过程。比如一下情况:1.一个DOM元素的几何属性变化，常见的几何属性有width,height,padding,margin,left,top...2.DOM节点发生增减或者移动3.读写offset族,scroll族属性的时候，浏览器为了获取这些值，需要回流操作4.调用window.getComputedStyle方法。
什么是重排与重绘，如何减少重排
WZH15075051915的博客
03-01 1419
10.查询某些属性或调用某些计算方法：offsetWidth、offsetHeight 等，除此之外，当我们调用 getComputedStyle 方法，或者 IE 里的 currentStyle 时，也会触发重排，原理是一样的，都 为求一个 “即时性” 和 “准确性”。浏览器会维护一个队列，把所有会引起重排、重绘的操作放入这个队列，等队列中的操作到了一定数量或者到了一定的时间间隔，浏览器就会 flush 队列，进行一个批处理。1. 减少直接操作 DOM 元素。
前端性能之减少重排和重绘
假装是个web dog
04-13 684
怎么减少重排和重绘？？ 首先减少获取操作 1 在for循环中，尽量不要进行样式的获取操作（因为一获取就会flush(清空)浏览器维护的队列 ） 2 尽量少用sytle修改样式，通过添加class进行一次性修改样式 3 使用 translate 代替 left/top等，（translate只会触发重绘，不会引起重排，可以减少一次重排的时间） 4 使用opacity代替visibi...
减少重排提高性能的方式
ll13352976097的博客
05-25 811
尽管网页达到了2MB，但是性能却成了一个热点话题。你的应用越舒畅，用户体验就越好，转换率就越高。 也就是说，添加粗浅的CSS3动画或者不考虑后果的控制多个DOM元素会让我感到很惭愧。当在应用视觉效果时，浏览器中用到了两个术语： 重绘 重绘放生在元素的改变影响显示但不影响布局的时候。例如，opacity, background-color, visibility, 和outline。重绘是很昂贵的，因为浏览器必须检查DOM中所有的节点——在发生改变的元素下，一个或多个元素变的可见！ 重排 重排会有更大的影响。
重绘与重排
freya_Du的博客
02-27 218
重绘 -是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。 -触发重绘的条件：改变元素外观属性。如：color，background-color等。 重排（重构/回流/reflow） -当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时...
什么是重排？如何减少重排？
2203_75321064的博客
02-29 1420
浏览器的重绘（repaint）和重排（reflow）是指浏览器对网页进行重新渲染的过程。重排是指重新计算网页布局的过程，而重绘则是根据新的布局信息重新绘制网页的过程。它们的区别在于，重排会导致元素的尺寸、位置、内容等属性的变化，因此需要重新计算布局信息；而重绘则是在元素的位置和尺寸等属性不变的情况下，重新绘制元素的样式。浏览器的重排和重绘是网页性能优化中的重要概念，理解它们的原理和影响，可以帮助我们更好地优化网页性能。重排是比较消耗性能的操作，因为它需要重新计算元素的布局信息。
浏览器解析html
qq_33555718的博客
10-08 405
对于前端开发来讲了解浏览器解析dom的过程是有必要的，可以帮助我们写出更搞笑稳定的代码。这是我之前总结的一些内容今天和大家分享下。 1.浏览器是如何解析dom的浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。 2. 将CSS解析成 CSS Rule Tree 。 3. 根据DOM树和CSS...
【DOM】重绘与重排详解及在性能优化中的应用
chtazycdf的博客
03-20 1642
当DOM元素变化影响了元素的集合属性（宽和高）——比如改变边框宽度或者给段落添加文字，导致行数增加——浏览器需要重新计算元素的几何属性， 同样其他元素的几何属性和位置也会因此受到影响。因此当页面顶部的一个动画推移页面整个余下的部分时，会导致一次代价昂贵的大规模重排，让用户感到页面一顿一 顿的。例如，如果你创建一个5列和500～1000行的表格，并使用tr:hover改变背景色来高亮显示鼠标所在的当前行， 当鼠标在表格上移动时， 性能会降低。在修改样式的过程中， 最好避免使用上面列出的属性。
重排重绘以及如何减少
06-09
### 浏览器重排与重绘的概念 ...通过批量操作 DOM、避免频繁访问影响布局的属性、使用 CSS 动画、将复杂动画移出主文档流以及减少表格布局的使用，可以显著减少重排和重绘的发生频率，从而提升网页性能[^3]。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值