【基础】display:none 和 visibility:hidden 之间的区别

记得很久之前的一次面试，面试官问我是否知道 display:none（下文简称 dn）和 visibility:hidden（下文简称 vh）之间的区别。

最直观的答案当然是：两者都会让元素隐藏，dn 不占用位置空间，vh 占用位置空间。
今天复习回流重绘的时候学习到：

1. vh 因为占用位置所以不会触发回流，所以在性能上要好过 bn。
2. 而且对于子元素，dn 的子元素全部都不可见，vh 的子元素可以通过单独设置 visibility:visible 来显示。
3. 从性能上看，vh 要优于 dn，所以在可以用 vh 的时候优先使用 vh。

什么是回流 （来自ai

回流（Reflow）是网页渲染过程中的一部分，特指浏览器为了重新计算元素的几何属性（如位置和大小）而重新构造渲染树的过程。这个过程可能伴随着重新布局（Layout）和重绘（Painting），当页面中的某些元素的变化影响了其周围内容的布局时，就需要进行回流。

触发回流的情况有很多，例如：

• 元素尺寸改变，比如宽度、高度、边距、填充等属性的动态调整。
• 页面渲染初始化或者浏览器窗口尺寸变化，导致需要重新计算布局。
• DOM结构发生变化，比如添加或删除可见的DOM元素。
• CSS样式更改，尤其是那些影响元素布局的样式，如display、position、float等属性的修改。
• 计算 offsetWidth、offsetHeight、clientWidth、clientHeight、getComputedStyle() 等属性时，可能需要强制浏览器进行回流以获取最新数据。

回流是一个相对耗时的操作，特别是在复杂页面中，频繁的回流会导致用户界面响应变慢，影响用户体验。因此，在开发高性能的Web应用时，应尽量减少触发回流的操作。