可见性:隐藏和显示:无之间的性能差异

Performance differences between visibility:hidden and display:none

本文关键字：性能 之间 隐藏 显示 可见性      更新时间：2024-06-04

我想在我的jQuery Backbone.js Web应用程序中简化事情。其中一个简化是我的菜单和对话框小部件的行为。

以前，我在开始时创建了菜单的div框，并使用display: none; opacity:0;隐藏了它们。 当我需要一个菜单时，我将其样式更改为 display:block然后使用 jQuery ui 位置实用程序定位div 框(因为无法定位带有 display:none 的元素(，完成后，最后将其样式更改为 opacity:1 .

现在我想用visibility:hidden隐藏它们，当我需要一个时，我使用位置实用程序，然后将样式更改为visibility:visible。 当我开始使用这种新方法时，我将在整个 Web 应用程序会话中隐藏大约 10 个div 框，这些框是隐藏的，但占用空间，与之前用 display:none 隐藏的div 框形成鲜明对比。

我的新方法意味着什么？它是否在任何方面影响浏览器性能？

display:none;元素并不全部在渲染树中，因此它们在表面上的表现会更好。

不过，我怀疑您不会因此而遇到任何真正可见的性能问题。如果您因为它们的功能而需要opacity: 0或visibility: hidden，那么只需使用它们。如果您不需要该功能，请使用display: none;

如果您通过javascript在可见和不可见状态之间切换，那么visibility：hidden 应该是性能更好的。看到它在可见和隐藏状态下总是占用相同的空间量，因此每次您使其看起来消失时，它都会导致其下方元素的重排。对于 display：none ，您将它从文档流中删除，然后当您将其设置为 display：block 时，您将重新渲染它并将该元素下方的所有内容向下推，基本上是再次布置所有这些内容。

但是，如果您正在执行诸如在按钮按下时切换可见状态之类的操作，那么您确实应该使用适合您需求而不是性能更好的状态，因为在这种情况下性能差异可以忽略不计。当您以每秒大约 20 次的速度使用 dom 进行动画处理时，您可以担心可见性：隐藏与显示：无的性能。

visibility: hidden不

会导致文档重排，而display: none会导致重排。

display: none：HTML 引擎将完全忽略该元素及其子元素。引擎不会忽略标有visibility: hidden的元素，它将对元素及其子元素进行所有计算，例外情况是元素不会渲染到视口。

如果需要位置和尺寸属性的值，则必须使用visibility: hidden并且您必须处理视口中的空白区域，通常是将该元素包装在另一个宽度和高度为 0 且"溢出：隐藏"的元素中。

display:none将从文档的正常流程中删除该元素，并将元素及其子元素上的位置/高度/宽度值设置为 0。当元素display属性更改为 none 以外的其他值时，它会触发完整的文档重排，这对于大文档来说可能是一个问题 - 有时在功能有限的硬件上呈现不太大的文档。

display: none是在视口上隐藏元素时使用的自然和合乎逻辑的解决方案，visibility: hidden应在需要时用作回退。

编辑：正如@Juan所指出的，当您需要向 DOM 树添加许多元素时，display: none是选择。 visibility: hidden将触发添加到树中的每个元素的重排，而display: none不会。

我不知道

display:none和visibility:hidden之间有任何性能差异 - 即使有，对于只有 10 个元素，它完全可以忽略不计。 正如您所说，您主要关心的应该是是否希望元素保留在文档流中，在这种情况下，visibility是一个更好的选择，因为它维护元素的框模型。

好吧，display: block 和 visibility: hidden 之间的主要性能区别在于，如果你有一个列表，比如说，100000 个元素，visibility: hidden不会让你免于 DOM 挂起，因为它不会从 DOM 中删除元素。 visibility: hidden的行为就像opacity: 0+pointer-events: none。 display: none表现得像Element.remove().

现场示例：https://jsfiddle.net/u2dou58r/10/

根据个人经验，刚刚在一个简单的静态页面上尝试了两者，表单位于"隐藏"按钮下方，visibility: hidden完美地执行，而display: none会导致可单击按钮在单击时略微跳跃，就好像它试图显示隐藏的按钮一毫秒。

我认为这可能与这个问题有关： CSS 属性：显示与可见性

我只引用有趣的部分：

该元素永远不会从 DOM 层次结构中删除。当使用display：none时，所有块级显示"样式"都是完全"隐藏"的，而使用可见性：隐藏;元素本身是隐藏的，但它仍然占据 DOM 中的视觉空间。

因此，在浏览器性能方面应该没有真正的区别，因为两个版本仍在 DOM 层次结构中。这些属性仅影响元素相对于 DOM 的显示方式。

好吧，可见性：none 仍然使用div 的空间。因此，您可以跳过定位部分，因为它的位置已经分配(从而获得更好的性能(。

但我不知何故猜测您需要 display：none 方法在触发"show"事件时正确分配空间。

相关文章：