我有一个包含很多东西的div。首先，它有一个图表（来自amCharts），以及来自noUiSlider的几个滑块。它也由很多AngularJS功能组成。我尝试隐藏页面$('#container').addClass('hidden')其中hidden具有规则display:none !important。
它可以工作，但需要500毫秒才能完成。如果我height: 0 !important代替display: none !important，也会如此。当用户点击不同的菜单项时，我基本上试图模仿页面更改，所以我喜欢它至少不像现在那样闪烁。我想知道这里的任何CSS专家是否都知道一种更好的方法来快速隐藏一个庞大而复杂的div。
顺便说一句，我使用Chrome和第二代i3。不是最好的处理器，但是有足够多的人使用我想要的质量更好的机器。
注意：我没有JSFiddle，因为页面非常复杂，需要MySQL后端。
答案 0 :(得分：2)
根据to this article on show/hide performance，似乎直接从display: none和display: block更改CSS是从浏览器中进行性能测试的最快方式。虽然对于jQuery使用.hide()和.show()进行后续隐藏/显示的注释确实变得更快：
1st .css（{＆＃39; display＆＃39;：＆＃39; none＆＃39;}）＆amp;的CSS（{＆＃39;显示＆＃39;：＆＃39;块＆＃39;}）;
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（）＆amp; .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
3rd .addClass（）＆amp; .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'}) vs .hide()运行了我自己的测试用例，似乎.css({'display':'none'}) is faster：
答案 1 :(得分：1)
而不是添加课程，你可以这样做
$('#container').hide();
答案 2 :(得分：0)
对于css类，请尝试
visibility: hidden;
display将完全从DOM中删除元素。可见性将隐藏它，因此所有用于渲染的能量都是守恒的。
问题在于，可见性将保持在dom中的位置。你需要找到一种填补空白的方法，这可能与你想要做的不同。
关于性能，this是jsPerf。这仅表明两者在简单div上的边际差异。 Here是另一个深入研究细节的问题。可见性将框元素留在渲染树中，因此需要较少的工作才能将其重新添加。对于复杂的元素树，我认为您会看到jsPerf中发生的事情会产生更大的差异。
答案 3 :(得分：0)
奇怪的是，添加课程hidden需要更长的时间，只需在Chrome中添加属性display:none即可。调用jQuery＆＃39; s hide()实际上会将元素添加到元素中，而不是添加新类。虽然两者基本上完成了相同的事情，但奇怪的是它们比另一个奇怪地需要更长的时间。我想Chrome会尝试重新渲染整个类，然后隐藏它。但是如果我只是添加display:none，它就会意识到我只想隐藏它，而不是重新渲染。