Chrome v41 +显示性能问题：无;在很多节点上 [英] Chrome v41+ performance issue with display: none; on lots of nodes

问题描述

我最近注意到，在将 display：none; 应用于很多节点时，Chrome会吐出：

<一个href =http://codepen.io/mattdietsche/pen/JomjWx =nofollow> CodePen示例

在上面的CodePen中，您可以在1000个元素上切换 display：none; 时看到延迟。如果碰撞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;}  

< pre class =snippet-code-html lang-html prettyprint-override> < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery < / - >< / script>< button class ='hide'> toggle'display：none;'< / button><！ - *这只是创建一个包含1000< p>的div ;标签* / - >< div class ='wrap'> < p为H. 1·; / p为H. < p为H. 2'; / p为H. < p为H. 3'; / p为H. < p为H. 4℃; / p为H. ...< p> 998< / p> < p为H. 999< / p为H. < p> 1000< / p>< / div>

解决方案

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

当我在Chrome浏览器中遇到同样的问题时，我使用了它。

I've recently noticed Chrome puking when applying display: none; to lots of nodes:

CodePen example

In the CodePen above, you can see the lag when toggling display: none; on 1000 elements. If you bump the 1000 to 3000 and toggle it again, the tab will hang completely. The same code works without any lag in Safari, and I'm 90% sure this was working fine in Chrome until the last month or so, so I'm guessing this is a recent Chrome bug. Has anyone else run into this and found a work around? (I have web app functionality that renders 3000+ elements, hides them all with CSS, and then shows them on demand with JS. Currently the page won't even load.)

Edit: Should have mentioned I'm seeing this in Chrome 41.0.2272.76 and Canary 43.0.2318.0. This does appear to be a bug that appeared somewhere in Chrome 41.x and has been reported.

$("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>

解决方案

There is a workaround. Use { height: 0; } instead of { display: none; } and { height: initial; } instead of { display: block; }.

I used it when I faced the same problem with 1300+ items in Chrome.

这篇关于Chrome v41 +显示性能问题：无;在很多节点上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！