81

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

该声明是

display: none导致 DOM 回流，而visibility: hidden不会。

所以我的问题是：

什么是 DOM 回流，它是如何工作的？

4

3 回答 3

124

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

当您：

  • 在 DOM 中插入、删除或更新元素
  • 修改页面上的内容，例如输入框中的文本
  • 移动一个 DOM 元素
  • 动画 DOM 元素
  • 测量一个元素，例如 offsetHeight 或 getComputedStyle
  • 更改 CSS 样式
  • 更改元素的类名
  • 添加或删除样式表
  • 调整窗口大小
  • 滚动

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

于 2014-12-24T12:51:54.227 回答
16

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

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

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

于 2014-12-24T12:51:33.397 回答
1

这意味着，如果您设置display: none;，您的浏览器将重新计算 DOM 元素的位置，如果 visibility: hidden; - 不是。想一想，这是因为visibility: hidden;它不会改变 DOM 中的元素大小。

于 2014-12-24T12:51:35.817 回答