什么是DOM回流？

72

我正在阅读有关两个CSS属性之间的区别display:none，visibility:hidden并且遇到了DOM重排术语。

该声明是

display: none导致DOM重排，而visibility: hidden不会。

所以我的问题是：

什么是DOM重排，它如何工作？

— ir
source

6

可见性：隐藏将对象保留在空间中，因此浏览器无需重新计算dom元素的位置

— Hacketo 2014年

6

简而言之，DOM Reflow是您的浏览器需要重新计算DOM元素的位置/大小以显示页面时。在您的特定示例中，您可能注意到某个visibility: hidden元素似乎仍然存在（显示该元素所需的空间仍被占用，它仍在“流程中”，只是不可见），而某个display: none元素将您的元素完全从流程中移出。

— Laurent S.

1

我是来这里看看确切的陈述的。

— Jry9972 '18 -10-5

110

一个回流计算页面的布局。元素上的重排会重新计算元素的尺寸和位置，并且还会触发该元素的子元素，祖先元素和出现在DOM中的元素的进一步重排。然后调用最后的重涂。回流非常昂贵，但不幸的是它很容易触发。

回流发生在以下情况：

在DOM中插入，删除或更新元素

修改页面上的内容，例如输入框中的文本

移动DOM元素

为DOM元素设置动画

对诸如offsetHeight或getComputedStyle之类的元素进行测量

更改CSS样式

更改元素的className

添加或删除样式表

调整窗口大小

滚动

有关更多信息，请参见此处：重绘和重排：负责地操作DOM

— 卡伦·基什米尔扬
source

2

对DOM元素进行动画处理不一定会触发重排，例如。如果您使用CSS3属性进行转换，则不会发生重排

— Nitish

2

更改visibility到none是不是一个CSS样式的变化？

— Qwerty

1

@Qwerty有很多样式更改，这可能导致重排，所以我想这就是为什么他们在全球范围内说“更改CSS样式”的原因。

— 卡伦·基什米尔扬（Karlen Kishmiryan）

14

重排是Web浏览器进程的名称，用于重新计算文档中元素的位置和几何形状，以重新呈现部分或全部文档。

https://developers.google.com/speed/articles/reflow

display:none隐藏div好像div没有渲染，而visibility:hidden仅隐藏但空间仍被占用

— 维托里诺·费尔南德斯
source

1

这意味着，如果您将设置display: none;，则浏览器将重新计算DOM元素的位置（如果可见性为：隐藏；否则为false）。不是认为是因为visibility: hidden;它不会更改DOM中的元素大小。

— 垃圾
source