Display:none 需要 500 毫秒或更长时间 - 有更快的方法吗？答案

【问题标题】：Display:none takes 500ms or more - is there a faster way?Display:none 需要 500 毫秒或更长时间 - 有更快的方法吗？
【发布时间】：2015-03-20 04:42:51
【问题描述】：

我有一个 div，里面有很多东西。一方面，它有一个图表（来自 amCharts），还有几个来自 noUiSlider 的滑块。它也由许多 AngularJS 功能组成。我尝试通过执行$('#container').addClass('hidden') 来隐藏页面，其中hidden 具有规则display:none !important。

它可以工作，但可能需要 500 毫秒才能执行。如果我使用height: 0 !important 而不是display: none !important，情况也是如此。当用户单击不同的菜单项时，我基本上是在尝试模仿页面更改，因此我希望它至少不会像现在那样闪烁。我想知道这里是否有任何 CSS 专家知道快速隐藏大而复杂的 div 的更好方法。

顺便说一句，我正在使用带有 i3 第二代的 Chrome。不是最好的处理器，但有足够多的人使用这台高质量的机器，我想让它更流畅。

注意：我没有 JSFiddle，因为页面非常复杂，需要 MySQL 后端。

【问题讨论】：

能否提供一个 jsFiddle 示例来重新创建场景。
尝试淡化 div 吗？
我只用 AmChart 制作了一个 JSBin，但它似乎立即消失了。重新创建整个页面并不容易，而且我不想在线发布代码。我只是想知道是否有人知道更好的方法。
褪色也差不多。疯狂的是，它隐藏起来会卡住，但会立即再次显示 div。
500ms 很慢，但话又说回来，如果页面非常复杂，你要求浏览器完全重新计算布局，所以这不是不可能的，如果你愿意，不不显示的东西，除了告诉它display: none之外别无选择。

标签： javascript css performance

【解决方案1】：

根据to this article on show/hide performance 看来，直接从display: none 和display: block 更改CSS 似乎是在浏览器中进行性能测试的最快方法。尽管对于使用 jQuery 的 .hide() 和 .show() 进行后续隐藏/显示的注释确实变得更快：

第一个 .css({'display':'none'}) & .css({'display':'block'});

Browser         hide/show
FF3.6   -       14ms / 12ms
Safari 4.05 -   2ms / 1ms
Opera 10.10 -   2ms / 2ms
Chrome 5.0.3 -  2ms / 1ms
IE 6.0  -       16ms / 16ms
IE 7.0  -       0ms / 0ms

2d .show() & .hide()

Browser         hide/show
FF3.6 -         29ms / 10ms 
Safari 4.05 -   6ms / 1ms
Opera 10.10 -   9ms / 1ms
Chrome 5.0.3 -  5ms / 1ms
IE 6.0  -       31ms / 16ms 
IE 7.0  -       15ms / 16ms

第三个 .addClass() & .removeClass()

Browser      hide/show
FF3.6   -       11ms / 11ms 
Safari 4.05 -   2ms / 2ms
Opera 10.10 -   6ms / 3ms
Chrome 5.0.3 -  3ms / 1ms
IE 6.0  -       47ms / 32ms
IE 7.0  -       15ms / 16ms

我还针对.css({'display':'none'}) 和.hide() 运行了我自己的测试用例，似乎.css({'display':'none'}) is faster：

【讨论】：

【解决方案2】：

你可以这样做而不是添加类

$('#container').hide();

【讨论】：

这会更快，因为...？？你知道它的实际作用吗？
当.hide()被调用时，显示属性的值被保存在jQuery的数据缓存中。
这样更好吗？还在做display: none证明github.com/jquery/jquery/blob/…
我认为这是评论，而不是答案。
好吧，我不认为它会起作用，但它会起作用！我知道hide() 内部调用display:none，所以这让我认为这不会有什么不同。不过，这里的区别在于，我是直接更改元素的样式，而不是通过添加新类来间接更改样式。我想当我添加一个类时，Chrome 会首先尝试重新渲染整个 div，这会导致速度变慢。

【解决方案3】：

奇怪的是，添加类 hidden 比在 Chrome 中添加属性 display:none 花费的时间要长得多。调用 jQuery 的 hide() 实际上是将样式添加到元素中，而不是添加新类。尽管两者都完成了基本相同的事情，但奇怪的是，一个比另一个花费的时间要长得多。我猜如果我添加类，Chrome 会尝试重新渲染整个内容，然后将其隐藏。但是如果我只是添加display:none，它就会意识到我只是想隐藏它，而不是重新渲染。

【讨论】：

【解决方案4】：

对于css类试试

visibility: hidden;

display 将从 DOM 中完全删除元素。可见性将隐藏它，因此所有用于渲染的能量都被保存了。

这样做的问题是可见性将在 dom 中占有一席之地。您将需要找到一种方法来填补空白，这可能是您想要做的事情，也可能不是。

在性能方面，this 是一个 jsPerf。这仅在一个简单的 div 上展示了两者之间的微小差异。 Here 是另一个深入细节的 SO 问题。可见性将框元素留在渲染树中，因此需要较少的工作来将其重新添加。对于复杂的元素树，我认为您会看到与 jsPerf 中发生的情况相比更显着的差异。

【讨论】：

" all that energy for rendering is conserved"，你能提供性能测试来证明吗？
你知道“可见性”是做什么的吗？该元素将继续占用页面上的物理空间，只是不被显示。这不太可能是 OP 想要的。顺便说一句，我认为您对“DOM”和“渲染页面”之间的区别感到困惑。 display not“从 DOM 中删除元素”。它不渲染它，这是完全不同的事情。
这是 OP 尝试的建议。我确实在我的原始帖子中提到了行为的区别。至于 DOM 和渲染页面的区别，我是在暗示可见的 DOM，但是渲染的页面更清晰。