html-什么是DOM重排?

我正在阅读有关两个CSS属性display: nonevisibility: hidden之间的差异,并遇到了DOM重熔术语。

该声明是

display: none导致DOM重排,而visibility: hidden没有。

所以我的问题是:

什么是DOM重排及其工作方式?

eirenaios asked 2019-11-15T15:06:46Z
3个解决方案
86 votes

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

回流发生在以下情况:

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

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

Karlen Kishmiryan answered 2019-11-15T15:09:01Z
10 votes

回流是网络浏览器进程的名称,用于重新计算   为此,文档中元素的位置和几何形状   重新呈现部分或全部文档。

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

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

Vitorino fernandes answered 2019-11-15T15:09:53Z
1 votes

这意味着,如果您将设置display: none;,则浏览器将重新计算DOM元素的位置。 不是 认为是因为visibility: hidden;不会更改DOM中的元素大小。

degr answered 2019-11-15T15:10:26Z
translate from https://stackoverflow.com:/questions/27637184/what-is-dom-reflow