DOM的重排（回流）和重绘（页面渲染过程、重排、回流和重绘概念及其触发操作、浏览器对重排和重绘的优化策略、其它优化方法（基于HTML、CSS方面优化、基于JavaScript方面优化））

最新推荐文章于 2025-04-24 13:42:58 发布

原创最新推荐文章于 2025-04-24 13:42:58 发布 · 754 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web页面渲染过程 #DOM重排概念和触发操作 #DOM重绘概念和触发操作 #浏览器对重排和重绘的优化策略 #基于CSS和JS对重排的优化

前端优化+代码格式化专栏收录该内容

7 篇文章

订阅专栏

本文介绍了网页渲染的过程，包括重排（回流）、重绘的概念及触发条件，并详细探讨了浏览器如何优化这些操作来提高性能。此外，还提供了一系列实用的HTML、CSS和JavaScript优化策略。

页面的渲染过程

（1）Javascript：通过JS实现动画效果或者操作DOM实现交互

（2）Style：计算样式，如果样式有改变将重新计算，并返回给DOM

（3）Layout：根据DOM的样式，重新布局（重排、回流）

（4）Paint：在多个渲染层上，对新的布局重新渲染（重绘）

（5）Composite：将绘制好的多个渲染层合并，显示到页面上

在页面生成时，至少进行一次布局和渲染，在后面用户不断地操作过程中会进行多次的重排和重绘，以至于影响页面的性能。

重排（回流）

浏览器下载完页面中的所有组件（HTML、JavaScript、CSS、图片）之后会解析生成两个内部数据结构（DOM 树和渲染树），DOM 树表示页面结构，渲染树表示 DOM 节点如何显示。重排是 DOM 元素的几何属性变化，DOM 树的结构变化，渲染树需要重新计算。

触发操作

页面渲染初始化时；（这个无法避免）
浏览器窗口改变尺寸；
元素尺寸改变时；
元素位置改变时；
元素内容改变时；
添加或删除可见的 DOM 元素时。
当获取一些属性值时，浏览器为了保证获取到正确的值也会引起重排。如元素的offsetTop，offsetLeft，offsetHeight，offsetWidth，scrollTop，scrollWidth，scrollLeft，scrollHeight等

重绘

重绘是一个元素外观的改变所触发的浏览器行为（元素的样式发生了变化，而大小和尺寸没有发生改变），例如改变 visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。由于浏览器的流布局，对渲染树的计算通常只需要遍历一次就可以完成。但 table 及其内部元素除外，它可能需要多次计算才能确定好其在渲染树中节点的属性值，比同等元素要多花两倍时间，这就是我们尽量避免使用 table 布局页面的原因之一。

触发操作

只修改元素的样式，而未修改元素的大小和位置，引起重绘。

重排（回流）和重绘关系

重绘不会引起重排，但重排一定会引起重绘，一个元素的重排通常会带来一系列的反应，甚至触发整个文档的重排和重绘，性能代价是高昂的。

浏览器本身优化策略

浏览器会维护一个队列，将所有引起重排和重绘的操作都放在这个队列里，当操作达到一定的数量或者时间间隔时，浏览器会进行一个批处理。这样可以让多次的重排重绘，变成一次。但是有时候一些特殊的style属性会使这种优化失效，例如offsetTop，scrollTop，clientTop等属性，这些属性都是要实时返回给用户的几何属性或者布局属性，因此浏览器需要立即执行，触发重排返回正确的值。

优化方法

HTML、CSS方面优化

将多次改变样式属性的操作合并成一次操作，减少 DOM 访问，可以通过切换类名的方法实现。
如果要批量添加 DOM，可以先让元素脱离文档流，操作完后再带入文档流，这样只会触发一次重排。（fragment 元素的应用）
将需要多次重排的元素，position 属性设为 absolute 或 fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。
由于 display 属性为 none 的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示。这样只在隐藏和显示时触发两次重排。
在内存中多次操作节点，完成后再添加到文档中去。例如要异步获取表格数据，渲染到页面。可以先取得数据后在内存中构建整个表格的 html 片段，再一次性添加到文档中去，而不是循环添加每一行。
将原始元素拷贝到一个独立节点中去，然后操作这个独立的节点，覆盖原始元素。