我正在阅读有关两个CSS属性display:none和visibility:hidden之间的差异，并遇到了DOM重排术语。
该声明是
display: none会导致 DOM 重排，而visibility: hidden则不会。
所以我的问题是：
什么是 DOM 回流，它是如何工作的？
重排计算页面的布局。 元素上的重排会重新计算元素的尺寸和位置，并且还会触发该元素的子元素、祖先和 DOM 中出现在其之后的元素上的进一步重排。 然后它调用最终重绘。 回流非常昂贵，但不幸的是，它很容易触发。
当您执行以下操作时，会发生回流焊：
- 在 DOM 中插入、删除或更新元素
- 修改页面上的内容，例如输入框中的文本
- 移动 DOM 元素
- 对 DOM 元素进行动画处理
- 测量元素，例如 offsetHeight 或 getComputedStyle
- 更改 CSS 样式
- 更改元素的类名
- 添加或删除样式表
- 调整窗口大小
- 滚动
有关更多信息，请参阅此处：重绘和重排：负责任地操作 DOM
重排是用于重新计算 文档中元素的位置和几何形状，用于 重新呈现部分或全部文档。
https://developers.google.com/speed/articles/reflow
display:none隐藏div，就好像div没有渲染一样，而visibility:hidden只是隐藏但空间仍然被占用
这意味着，如果您将设置display: none;，您的浏览器将重新计算 DOM 元素的位置，如果可见性：隐藏; - 不是。 想想，这是因为visibility: hidden;不会改变 DOM 中的元素大小。