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

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

以前，我在开始时创建了菜单的div框，并使用

display:none隐藏它们；不透明度：0。当我需要菜单时，我将其样式更改为
display:block
，然后使用jQuery ui position实用程序定位div框（因为无法定位带有
display:none
的元素），完成后，最后将其样式更改为
opacity:1

现在我只想用
可见性：隐藏
隐藏它们，当需要时，我使用position实用程序，然后将样式更改为
可见性：可见
。当我开始使用这种新方法时，在整个web应用程序会话中，我将有大约10个隐藏但占用空间的div框，与以前使用
display:none
隐藏的div框形成对比

我的新方法意味着什么？它会影响浏览器的性能吗
 我不知道
显示：无
和
可见性：隐藏
之间有任何性能差异-即使有，只要有10个元素，它就完全可以忽略不计。正如您所说，您主要关心的应该是是否希望元素保留在文档流中，在这种情况下，
可见性是一个更好的选择，因为它维护元素的框模型。
显示：无元素是，所以它们在表面上表现得更好

不过，我怀疑您是否会因此而出现任何明显的性能问题。如果因为它们的功能需要
不透明度：0
或
可见性：隐藏
，那么只需使用它们即可。如果不需要该功能，则使用
display:none
嗯，可见性：没有一个仍然使用div的空间。
因此，您可以跳过定位部分，因为它的位置已经分配（这样可以获得更好的性能）

但是我想您需要使用display:none方法来在触发“show”事件时正确分配空间。
可见性：hidden
不会导致文档重新流动，而
display:none
会

display:none
：HTML引擎将完全忽略该元素及其子元素。引擎不会忽略标记为“可见性：隐藏”的元素，它将对元素及其子元素执行所有计算，例外情况是元素不会渲染到视口

如果需要“位置”和“尺寸”属性的值，则必须使用“可见性：隐藏”，并且必须处理视口中的空白，通常是通过将该元素用0宽度和高度以及“溢出：隐藏”将其包装在另一个元素中

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

display:none
是在视口中隐藏元素时使用的自然且合乎逻辑的解决方案，
visibility:hidden
应在需要时用作后备方案

编辑：
正如@Juan所指出的，
display:none
是在需要向DOM树添加许多元素时的选择<代码>可见性：隐藏将触发添加到树中的每个元素的重新流动，而
显示：无
不会
 我认为这可能与这个问题有关：

我只想引用有趣的部分：

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

因此，在浏览器性能方面应该没有真正的区别，因为这两个版本仍然在DOM层次结构中。这些属性只影响元素在DOM中的显示方式。
如果您通过javascript在可见和不可见状态之间切换，那么visibility:hidden应该是更好的执行者。因为它在可见和隐藏状态下总是占据相同的空间，所以它不会在每次使其出现或消失时导致其下方元素的回流。对于display:none，您将其从文档流中删除，然后当您将其设置为display:block时，您将对其重新排序，并将该元素下面的所有内容向下推，基本上是将所有内容再次放出来

但是，如果您在按钮按下时切换可见状态，那么您真的应该使用适合您需要的，而不是性能更好的，因为在这种情况下，性能差异可以忽略不计。当您以每秒20次左右的速度使用dom制作动画时，您可能会担心可见性：隐藏与显示：无的性能。
根据个人经验，您刚刚在一个简单的静态页面上尝试了这两种方法，其中一个表单位于“隐藏”按钮下方，
visibility:hidden
的性能完美无瑕，而
display:none
会使可点击按钮在点击时轻微跳跃，就好像它试图在毫秒内显示隐藏按钮一样
 嗯，
display:block
和
visibility:hidden
之间的主要性能差异在于，如果您有一个100000个元素的列表，那么
visibility:hidden
不会将您从DOM挂起中解救出来，因为它不会从DOM中删除元素。
v