可见性之间的性能差异：隐藏和显示：无
我想简化我的jQuery Backbone.js Web应用程序中的东西。 一个这样的简化是我的菜单和对话框小部件的行为。
以前我在开始时创build了我的菜单的div盒，并使用display: none; opacity:0;来隐藏它们display: none; opacity:0; display: none; opacity:0; 。 当我需要一个菜单，我改变了它的样式display:block然后使用jQuery的ui位置实用程序来定位div框（因为元素与display:none不能定位），当它完成后，最后改变其风格为opacity:1 。
现在，我只想隐藏它们visibility:hidden ，当我需要一个，我使用位置实用程序，然后将样式更改为visibility:visible 。 当我开始使用这种新的方法时，在整个Web应用程序会话中，我将有大约10个div box被隐藏，但占据空间，而之前的div box则隐藏着display:none 。
我的新方法有什么意义？ 它在任何方面影响浏览器性能？
我不知道display:none之间的任何性能差异display:none和visibility:hidden – 即使有，只要10个元素，它将完全可以忽略不计。 如您所说，您的主要关注点应该是您是否希望元素保留在文档stream中，在这种情况下， visibility是更好的select，因为它维护元素的框模型。
如果你通过javascript切换可见和不可见状态，隐藏应该是更好的performance。 由于在可见状态和隐藏状态下它总是占用相同数量的空间，所以每当它出现消失时，它不会引起下面的元素的回stream。 对于显示：没有任何你从文档stream中删除它，然后当你设置它显示：阻止你重新渲染它，并推动该元素下面的一切，本质上再次放下所有的东西。
但是如果你按照button来切换可见状态，那么你真的应该使用适合你需要的东西，而不是什么性能更好，因为在这种情况下性能差异是微不足道的。 当你以每秒20次左右的速度animation时，你可以担心能见度的performance：hidden vs display：none。
display:none; 元素不在渲染树中 ，所以它们的performance会更好。
我怀疑你会有任何真正的可见的性能问题，但是。 如果您需要opacity: 0或visibility: hidden 由于其function而 visibility: hidden ，则只需使用它们即可。 如果你不需要这个function，那么使用display: none;
visibility: hidden不会导致文档上的回stream，而display: none 。
display: none使HTML引擎完全忽略元素及其子元素。 引擎不会忽略标记为visibility: hidden元素visibility: hidden ，它将执行对元素及其子元素的所有计算，但元素不会在视口上呈现。
如果需要位置和尺寸属性的值，那么必须使用visibility: hidden ，并且必须处理视口中的空白区域，通常通过将该元素封装在另一个元素中，宽度和高度分别为0和“overflow：hidden”。
display:none将从文档的正常stream程中移除该元素，并将元素及其子元素上position / height / width的值设置为0。 当元素display属性改变为其他值而不是none ，它会触发完整的文档回stream，这对于大文档可能是一个问题 – 有时甚至是在硬件上呈现的function有限的文档不太大。
display: none在隐藏视口上的元素时， display: none是自然和合乎逻辑的解决scheme， visibiliy: hidden应该被用作后备，在需要的地方。
编辑：由@Juan指出， display: none当你需要的是添加很多元素到DOM树时， display: noneselect去。 visibility: hidden将触发每个添加到树中的元素的重新stream动，而display: none将不会。
我认为这可能与此问题有关： CSS属性：显示与可见性
我只会引用有趣的部分：
该元素永远不会从DOM层次结构中移除。 所有的块级显示“样式”在使用display：none时是完全“隐藏的”，而可见性：隐藏的; 该元素本身是隐藏的，但它仍占用DOM中的可视空间。
所以在浏览器性能方面应该没有真正的区别，因为这两个版本仍然在DOM层次结构中。 这些属性只影响元素在DOM方面的显示方式。
从刚刚尝试过一个简单的静态页面和一个位于“隐藏”button下面的表单的个人经验， visibility: hidden完美地执行，而display: none导致可点击的button略微跳跃，就像它试图显示隐藏的button一毫秒。
那么，知名度：没有任何使用div的空间。 所以你可以跳过定位部分，因为它的位置已经被分配了（并且由此获得更好的性能）。
但我不知何故猜测你需要你的display：none方法在触发“show”事件时正确地分配空间。
