在前端开发中，经常需要控制元素的显示和隐藏。我们可以使用 CSS 属性 visibility 和 display 来实现这一目的。但是，当我们使用 jQuery 等 JavaScript 库时，通常会发现它们使用 display: none 而不是 visibility: hidden 来隐藏元素。那么，为什么要这样做呢？
区别
首先，让我们了解一下 visibility 和 display 的区别。
visibility
visibility 控制元素是否可见，但仍保留元素在文档流中所占用的空间。当我们将一个元素的 visibility 设置为 hidden 时，该元素的内容将不再显示，但它在文档流中仍然存在，并占据着相应的空间。
-------- - ----------- ------- -
---- ------------- ------- ------
上面的代码会将 <div> 元素隐藏起来，但是它仍然占用着相应的空间。如果我们使用开发者工具查看页面的 DOM 结构，可以看到该元素在 DOM 树中仍然存在。
display
display 控制元素是否显示，并决定了元素在文档流中所占用的空间。当我们将一个元素的 display 设置为 none 时，该元素会从文档流中移除，并且不再占用相应的空间。
-------- - -------- ----- -
---- ------------- ------- ------
上面的代码会将 <div> 元素隐藏起来，并且它不再占用相应的空间。如果我们使用开发者工具查看页面的 DOM 结构，可以看到该元素已经不存在于 DOM 树中。
为什么要使用 display: none？
现在，我们回到最初的问题：为什么 jQuery 等 JavaScript 库使用 display: none 而不是 visibility: hidden 来实现显示/隐藏呢？
1. 兼容性
首先，display: none 在各种浏览器和设备上的兼容性更好。虽然 visibility: hidden 在大多数情况下也能正常工作，但在某些旧的浏览器和设备上可能会出现问题。
2. 布局
第二个原因是 display: none 不仅仅是隐藏元素，而是完全从文档流中移除元素。这意味着，当一个元素被隐藏时，它将不再占用任何空间，从而不会影响其他元素的布局。
例如，如果我们有一个页面的 header 和 footer，当我们隐藏中间的内容时，我们希望 header 和 footer 自动适应页面的高度，而不会空出中间内容原来所占用的空间。使用 display: none 可以轻松地实现这一点。
-------- ----- --------- ----- ------------- ------- ------- -------- ----- ---------
-------- - -------- ----- -
3. 性能
第三个原因是，使用 display: none 可以提高性能。当一个元素被隐藏时，浏览器不需要对其进行布局和绘制，从而可以节省计算资源和时间。
示例代码
下面是一个简单的例子，展示了如何使用 jQuery 将元素隐藏起来。
--------- ----- ------ ------ ------- ---------- - ----------------------------------------------------------- -------- ---------------------------------------------------------------------------------------