Question

我最近注意到Chrome在将display: none;应用于大量节点时呕吐：

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

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

＆＃13;

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

＆＃13;

.wrap.hide p {
  display: none;
}

button {
  cursor: pointer;
}

＆＃13;

<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>

＆＃13;

Answer 1

有一种解决方法。使用{height：0;而不是{display：none; }和{height：initial;而不是{display：block; }。

当我在Chrome中遇到1300多项问题时，我使用了它。

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

1 个答案: