可见性之间的性能差异：隐藏和显示：无 [英] Performance differences between visibility:hidden and display:none

问题描述

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

I want to simplify things in my jQuery Backbone.js web application. One such simplification is the behavior of my menu and dialog widgets.

以前，我在开始时创建了菜单的div框，并使用 display：none; opacity：0; 。当我需要一个菜单​​，我改变其风格为 display：block 然后使用jQuery ui位置实用程序来定位div框（因为显示：none 无法定位），完成后，最终将其样式更改为 opacity：1 。

Previously I created the div boxes of my menus at start and hid them using display: none; opacity:0;. When I needed a menu, I changed its style to display:block then used the jQuery ui position utility to position the div box (since elements with display:none cannot be positioned) and when it was done, finally changed its style to opacity:1.

现在我想使用 visibility：hidden 隐藏它们，当我需要一个时，实用程序，然后将样式更改为 visibility：visible 。当我开始使用这个新的方法，我将有大约10个div框在整个web应用程序会话被隐藏，但占据空间，与之前的div框隐藏 display：none 。

Now I want to just hide them with visibility:hidden, and when I need one, I use the position utility and then change the style to visibility:visible. When I begin using this new approach, I will have around 10 div boxes throughout the web application session that are hidden but occupy space, in contrast to the previous div boxes hidden with display:none.

我的新方法有什么影响？它在任何方面都会影响浏览器的性能吗？

What are the implications of my new approach? Does it effect browser performance in any regard?

推荐答案

我不知道 display：none 和 visibility：hidden - 即使有，只要10个元素，它将是完全可以忽略不计。你的主要关注点应该是，你是否希望元素保持在文档流中，在这种情况下 visibility 是一个更好的选择，因为它维护框模型元素。

I'm not aware of any performance difference between display:none and visibility:hidden - even if there is, for as little as 10 elements it will be completely negligible. Your main concern should be, as you say, whether you want the elements to remain within the document flow, in which case visibility is a better option as it maintains the box model of the element.

这篇关于可见性之间的性能差异：隐藏和显示：无的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！