怎么减少重排和重绘

最新推荐文章于 2025-06-25 11:10:14 发布

原创最新推荐文章于 2025-06-25 11:10:14 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

当页面布局和几何属性改变时就需要重排。下述情况会发生浏览器重排：

1、添加或者删除可见的DOM元素；

2、元素位置改变——display、float、position、overflow等等；

3、元素尺寸改变——边距、填充、边框、宽度和高度

4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；

5、页面渲染初始化；

6、浏览器窗口尺寸改变——resize事件发生时；

减少重排重绘

**
Reflow 的成本比 Repaint 的成本高得多的多。一个节点的 Reflow 很有可能导致子节点，甚至父节点以及兄弟节点的 Reflow 。在一些高性能的电脑上也许还没什么，但是如果 Reflow 发生在手机上，那么这个过程是延慢加载和耗电的。----浏览器的渲染原理简介

直接改变className，如果动态改变样式，则使用cssText（考虑没有优化的浏览器）；
让要操作的元素进行”离线处理”，处理完后一起更新；

(a) 使用DocumentFragment进行缓存操作,引发一次回流和重绘；
(b) 使用display:none技术，只引发两次回流和重绘；
© 使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘；

3.不要经常访问会引起浏览器flush队列的属性，如果你确实要访问，利用缓存；

让元素脱离文档流，减少回流的Render Tree的规模；
使用transfrom代替上面的 1 2 3 4 5 6 减少性能消耗

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

编程奥特曼

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【高频考点精讲】CSS性能优化实战：减少重排和重绘的10个高效技巧

全栈老李的博客

04-24

601

大家好，我是全栈老李。今天咱们聊点硬核的——CSS性能优化。很多前端同学可能觉得CSS就是写写样式，能跑就行，但真正的高手都知道，CSS写得不好，页面卡成PPT可不是开玩笑的。尤其是重排（Reflow）和重绘（Repaint），这两个家伙简直是性能杀手。

浏览器重绘和重排的详细分析及优化策略

七公子77的技术博客

02-24

1033

集中修改样式：合并多次 DOM 操作。优先使用 CSS 动画：利用合成层优化。避免强制同步布局：分离读写操作。减少布局查询：缓存布局信息。使用现代布局方案：Flexbox/Grid 替代浮动布局。

参与评论您还未登录，请先登录后发表或查看评论

如何减少重绘和重排

青山不改，绿水长流。

09-27

2044

浏览器会维护1个队列，把所有会引起回流、重绘的操作放入这个队列，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会flush队列，进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。3、当dom元素position属性为fixed或者absolute, 可以通过css形变触发动画效果，此时是不会出发reflow的。2、尽量减少table使用，table属性变化使用会直接导致布局重排或者重绘。4、不要把 DOM 结点的属性值放在一个循环里当成循环里的变量。

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

WZH15075051915的博客

03-01

1421

10.查询某些属性或调用某些计算方法：offsetWidth、offsetHeight 等，除此之外，当我们调用 getComputedStyle 方法，或者 IE 里的 currentStyle 时，也会触发重排，原理是一样的，都为求一个 “即时性” 和 “准确性”。浏览器会维护一个队列，把所有会引起重排、重绘的操作放入这个队列，等队列中的操作到了一定数量或者到了一定的时间间隔，浏览器就会 flush 队列，进行一个批处理。1. 减少直接操作 DOM 元素。

减少重排提高性能的方式

ll13352976097的博客

05-25

812

尽管网页达到了2MB，但是性能却成了一个热点话题。你的应用越舒畅，用户体验就越好，转换率就越高。也就是说，添加粗浅的CSS3动画或者不考虑后果的控制多个DOM元素会让我感到很惭愧。当在应用视觉效果时，浏览器中用到了两个术语：重绘重绘放生在元素的改变影响显示但不影响布局的时候。例如，opacity, background-color, visibility, 和outline。重绘是很昂贵的，因为浏览器必须检查DOM中所有的节点——在发生改变的元素下，一个或多个元素变的可见！重排重排会有更大的影响。

前端性能优化之减少重排和重绘

CC_Together的博客

04-13

2686

首先需要了解一下浏览器渲染HTML的大致过程：（1）HTML被HTML解析器解析成DOM Tree, css则被css解析器解析成CSSOM Tree（并行解析）。（2）DOM Tree和CSSOM Tree解析完成后，被合并到一起，形成渲染树（render Tree）。（3）重排：节点信息计算，即根据渲染树计算每个节点的几何信息（大小及位置）。（4）重绘：渲染绘制，即根据计算好的信息绘制...

了解重排与重绘

10-16

重排与重绘是Web开发中两个关键的概念，它们直接...开发者应尽量减少不必要的DOM操作，避免频繁的重排和重绘，以提升页面的响应速度和用户体验。通过上述优化技巧，可以有效地减少重排和重绘的开销，使网页更加流畅。

高性能JavaScript 重排与重绘(2)

10-23

在Web开发中，DOM操作是不可或缺的一部分，然而，频繁的DOM操作会引发性能问题，尤其是重排和重绘这两个方面。...通过上述的知识点和策略，开发者可以有效减少因重排和重绘导致的性能损耗，提升Web应用的用户体验。

前端性能优化之重排和重绘

01-27

感兴趣的同学可以看一下这篇文章，深度和广度俱佳从输入URL到页面加载的过程?如何由一道题完善自己的前端知识体系!切回正题，我们继续探讨何为重排。浏览器下载完页面所有的资源后，就要开始构建DOM树，于此同时还会...

什么是重排？如何减少重排？

ergdwqe的博客

03-10

787

8.使用文档片段（DocumentFragment）：如果需要创建大量 DOM 元素，可以使用文档片段来批量创建，然后一次性添加到文档中，减少重排的次数。9.避免触发布局属性的读取：尽量避免在布局属性（如宽度、高度、偏移量等）发生变化的情况下读取它们，因为这会强制浏览器进行重排。重排是一项昂贵的操作，因为它会触发浏览器重新计算并更新页面的布局，然后重新绘制受影响的元素，这可能会导致页面性能下降。2.改变了元素的样式：修改了元素的宽度、高度、边距、填充、定位等。

减少页面回流与重绘（Reflow & Repaint）

分享技术，共建开放平台

08-31

5001

如果你的HTML变得很大很复杂，那么影响你JavaScript性能的可能并不是JavaScript代码的复杂度，而是页面的回流和重绘。回流（Reflow）是指布局引擎为frame计算图形的过程。 frame是一个矩形，拥有宽高和相对父容器的偏移。frame用来显示盒模型（content model），但一个content model可能会显示为多个frame，比如换行的文本每行都会显示为

如何减少回流、重绘

Chen

07-22

3526

减少回流、重绘其实就是需要减少对render tree的操作，并减少对一些style信息的请求，尽量利用好浏览器的优化策略。具体方法有：1. 不要1个1个改变元素的样式属性，最好直接改变className，但className是预先定义好的样式，不是动态的，如果你要动态改变一些样

减少重绘和重排(重流)

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种减少重排提高性能的方式

weixin_33806509的博客

10-15

338

了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档脱离文档流有哪些方法

wanghe1111_的博客

03-24

1256

了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档脱离文档流有哪些方法

说一下重绘、重排区别如何避免？

油墨香^-^的博客

10-13

536

重绘：当一个元素的外观发生改变，但没有改变布局，重新把元素外观绘制出来的过程，所以重绘跳过了创建布局树和分层的阶段。重排需要重新计算布局树，重绘不需要，重排必定发生重绘，但是涉及到重绘不一定要重排。1页面初始渲染，这是开销最大的一次重排 -添加/删除可见的DOM元素 -改变元素位置 -改变元素尺寸，比如边距、填充、边框、宽度和高度等。重排：当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。

重绘、重排区别及如何减少

cxz

05-12

789

重绘当一个元素的外观发生改变，但没有改变布局，重新把元素外观绘制出来的过程，所以重绘跳过了创建布局树和分层的阶段。重排（回流）当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。关系重排需要重新计算布局树，重绘不需要，重排必定发生重绘，但是涉及到重绘不一定要重排。涉及到重排对性能的消耗更多一些。触发重排的方法 -页面初始渲染，这是开销最大的一次重排 -添加/删除可见的DOM元素 -改变元素位置 -改变元素尺

减少重排的方法

最新发布

qq_54237587的博客

06-25

242

4.css隐藏容器后修改，修改完成再展示，这样只触发两次重排重绘（隐藏一次，展示一次）一次性修改多个，这样可以避免修改一个重排重绘合成一次，减少不必要的性能损耗。transform改变不会触发重排，甚至不会触发重绘，只会触发合成。2.批量修改 DOM（如使用。3.克隆节点后批量修改替换。

什么是重排？如何减少重排

IinOoo的博客

02-29

725

重排：通常是指内存中的数据在物理上重新排列的过程。这通常发生在内存管理的时候，当程序需要分配大块内存或释放已经分配的内存时，内存中的数据就会被重新排列。除此之外，还可以通过使用更高效的内存管理工具、优化代码逻辑等方式来减少重排的频率，从而提高程序的性能。避免频繁的分配和释放大块内存：频繁地进行大块内存的分配和释放会增加重排的次数，尽量减少这种操作。使用更有效的内存分配算法：选择合适的内存分配算法可以减少重排的频率。优化数据结构的布局：合理设计数据结构的布局，可以减少内存重排的发生。

重排重绘以及如何减少

06-09

### 浏览器重排与重绘的概念浏览器的重排（reflow）和重绘（repaint）是网页性能优化中的核心概念。重排是指当 DOM 树中元素的几何属性发生变化时，浏览器需要重新计算布局的过程[^1]。而重绘则是指当一个元素的外观发生改变但不影响布局时，浏览器仅重新绘制该元素的外观过程[^2]。 ### 重排与重绘的原因重排通常由以下操作触发：DOM 结构的修改、样式表的变化、脚本对 DOM 元素的读写操作、窗口尺寸的变化等[^3]。例如，当添加或删除可见的 DOM 元素、更改元素的位置或大小时，都会引发重排。重绘则通常由不影响布局的样式变化引起，如颜色的变化、背景图像的切换等[^2]。 ### 减少重排与重绘的方法及原理为了减少重排和重绘对性能的影响，可以采取以下方法： #### 1. 批量操作 DOM 将多次的 DOM 操作合并为一次操作，以减少触发重排的次数。例如，通过创建文档片段（DocumentFragment）来批量插入多个节点，而不是逐一插入每个节点[^3]。 ```javascript const fragment = document.createDocumentFragment(); for (let i = 0; i < 100; i++) { const div = document.createElement('div'); div.textContent = `Item ${i}`; fragment.appendChild(div); } document.body.appendChild(fragment); ``` #### 2. 避免频繁访问影响布局的属性避免频繁访问如 `offsetWidth`、`offsetHeight` 等影响布局的属性，因为这些操作会强制浏览器进行同步重排。可以通过缓存这些值来减少不必要的重排[^3]。 ```javascript // 不推荐的做法 for (let i = 0; i < elements.length; i++) { console.log(elements[i].offsetWidth); // 每次访问都会触发重排 } // 推荐的做法 const widths = elements.map(el => el.offsetWidth); // 缓存宽度 for (let i = 0; i < elements.length; i++) { console.log(widths[i]); // 使用缓存值 } ``` #### 3. 使用 CSS 动画替代 JavaScript 动画 CSS 动画和硬件加速层可以在独立的线程上运行，从而减少主线程的压力并避免频繁的重排和重绘。 ```css /* 使用 CSS 动画 */ .element { transition: transform 0.5s ease; } .element:hover { transform: scale(1.2); } ``` #### 4. 将复杂动画移出主文档流通过使用 `position: fixed` 或 `transform` 属性，将动画元素移出文档流，从而避免影响其他元素的布局[^3]。 ```css /* 移出文档流 */ .element { position: absolute; transform: translateX(100px); } ``` #### 5. 减少表格布局的使用表格布局在结构上容易导致大面积的重排，因此尽量使用更灵活的布局方式，如 Flexbox 或 Grid 布局[^2]。 ```css /* 使用 Flexbox 替代表格布局 */ .container { display: flex; flex-direction: row; } ``` ### 总结通过批量操作 DOM、避免频繁访问影响布局的属性、使用 CSS 动画、将复杂动画移出主文档流以及减少表格布局的使用，可以显著减少重排和重绘的发生频率，从而提升网页性能[^3]。