处理大量元素时隐藏/显示功能的性能极慢答案

【问题标题】：Extremely slow performance of hide/show function when dealing with large number of elements处理大量元素时隐藏/显示功能的性能极慢
【发布时间】：2011-04-05 17:15:14
【问题描述】：

当我只在 Mac 上的 Safari 和 Chrome 以及包括 IE6 在内的所有其他浏览器中执行 $("#myDiv").show() 和 $("#myDiv").hide() 时，我遇到了糟糕的性能在 PC 和 Mac 上运行良好，所以这是一个 Webkit 问题。

div“myDiv”包含大量元素，包括大量复选框、JqueryUI 选项卡和 3 个滑块。

我尝试了“addClass”而不是显示/隐藏，我尝试将边距设置为 -10000 并重新设置为 0，但这些东西似乎都没有帮助。是否有解决方法或者这是这些浏览器的限制？

【问题讨论】：

可能是 jQuery 问题？尝试使用经典的javascript，看看它是否有任何效果。 document.getElementById('myDiv').style.display = 'none'
您是如何确定是 .show() 和 .hide() 导致了缓慢？
只是说，这种东西在 webkit 中对我来说通常比其他东西运行得更快。 o.O
在 Mac 上？这是一个特定于 mac 的问题

标签： javascript jquery performance google-chrome safari

【解决方案1】：

好的，我对此深表歉意，但这太令人兴奋了......

经过 50 次 JS 调整无济于事，原来我的问题出在 CSS 上！！！

在这上面浪费了一天之后，结果是“背景大小：100%；”崩溃 webkit！太疯狂了...删除那一行删除了我所有的崩溃。

再次，非常抱歉报告了错误的问题。

【讨论】：

紧急。我也有这个（Windows 7 上的 Chrome 和 Safari 最新版本，如果这很重要的话）。浏览器执行大多数 jQuery 动画真的很慢，而 Fx、IE 和 Opera 都很好，我不知道为什么。关闭background-size: auto 100%; 解决了它。感谢您发布这个（相当令人沮丧的）解决方案。

【解决方案2】：

这似乎是Jquery hide() and show() runs too slow in google chrome 已经讨论过的问题。他们确定这是 chrome 中的错误。

【讨论】：

我确实看到了，但它没有提供解决方法。此外，Safari 也有同样的问题。

【解决方案3】：

你可以试试这个：

$("#myDiv").css("display", "none");

【讨论】：

我做了，完全没有区别
很奇怪。通常 WebKit 在处理大量 dom 节点时表现非常好。

【解决方案4】：

尝试通过 var $mydiv = $('#myDiv') 缓存您的 myDiv，并在您的选择器中使用 $myDiv。这将避免每次您想要显示或隐藏时创建一个 jQuery 对象。

【讨论】：

试过了，但一点用都没有:(