DOM重排是什么？

Question

DOM重排是什么？

htmlcssdomvisibilityreflow

93

我正在阅读有关两个CSS属性display:none和visibility:hidden之间的区别，并遇到了DOM重新流动术语。该语句是：

display: none会导致DOM重新流，而visibility: hidden则不会。

所以我的问题是：

什么是DOM重新流动以及它如何工作？

- Suresh Karia

6

visibility: hidden会使对象在页面上隐藏，但仍占据原来的空间，这样浏览器就不需要重新计算DOM元素的位置。 - Hacketo

7

简单来说，DOM重新布局是指浏览器需要重新计算DOM元素的位置/大小以显示页面。在您的特定示例中，您可能会注意到一个visibility：hidden元素似乎仍然存在（显示它所需的空间仍然被占用，它仍然“在流程中”，只是不可见），而display: none元素完全将您的元素从流程中移除。 - Laurent S.

1

我看到了确切的陈述才来到这里。 - Jry9972

3个回答

17

重新排版是浏览器重新计算文档中元素的位置和几何形状，以便重新渲染部分或全部文档的过程名称。

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

display:none会隐藏

并使其不会被呈现，而visibility:hidden仅会隐藏该元素但仍然占用空间。

- Vitorino fernandes

2

这意味着，如果您设置display: none;，您的浏览器将重新计算DOM元素的位置，而如果使用visibility: hidden;则不会。因为visibility: hidden;不会改变DOM中的元素大小，请注意保留html标签。

- degr

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Karlen Kishmiryan · Accepted Answer

回流（reflow）是计算页面布局的过程。对一个元素进行回流会重新计算该元素的尺寸和位置，并触发其子元素、祖先元素以及在DOM中位于其后面的元素的进一步回流，最后调用一次重绘。回流非常耗费资源，但不幸的是它很容易被触发。

以下情况会引起回流：

向DOM中插入、删除或更新元素
修改页面内容，例如input框中的文本
移动DOM元素
给DOM元素添加动画
测量元素，例如offsetHeight或getComputedStyle
更改CSS样式
更改元素的className
添加或删除样式表
调整窗口大小
滚动

更多信息，请参考：Repaints and Reflows: Manipulating the DOM responsibly。