Chrome v41 +性能问题与display:none; 在许多节点上

Question

我最近注意到Chrome应用于display: none;大量节点时:

CodePen示例

在上面的CodePen中,您可以看到切换display: none;1000个元素时的延迟.如果你碰到1000到3000并再次切换它,标签将完全挂起.相同的代码在Safari中没有任何延迟,并且我90%确定这在Chrome中工作正常,直到上个月左右,所以我猜这是最近的Chrome bug.有没有其他人遇到这个并找到了解决方法？(我有Web应用程序功能,可以渲染3000多个元素,用CSS隐藏它们,然后用JS按需显示它们.目前页面甚至不会加载.)

编辑:应该提到我在Chrome 41.0.2272.76和Canary 43.0.2318.0中看到了这一点.这似乎是一个出现在Chrome 41.x中的某个地方的错误,并且已被报道.

$("button.hide").on("click",function(){
  $("div.wrap").toggleClass("hide");
});

.wrap.hide p {
  display: none;
}

button {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='hide'>toggle 'display: none;'</button>
<!-- * This just creates a div containing 1000 <p> tags */ -->
<div class='wrap'>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  ...
  <p>998</p>
  <p>999</p>
  <p>1000</p>
</div>

Answer 1

有一个解决方法。使用 { 高度：0; } 而不是 { 显示：无；} 和 { 高度：初始；} 而不是 { 显示：块；}。

当我在 Chrome 中遇到 1300 多个项目的同样问题时，我使用了它。