改变显示属性的收集div打破Chrome +非线性增长的速度

Question

假设我在一个页面上有很多div(> 1000)。每个都有一个id，格式为'div' + [0-n]

如果我遍历它们并调用:

document.getElementById('div'+i).style.display = 'none';

它的工作效率极高。在2.5k以上的潜水中，它们几乎立即消失。

但是，如果我遍历它们并调用:

document.getElementById('div'+i).style.display = '';

可以理解，它更慢。这些物品需要重新绘制和放置。

在Explorer 9和Firefox 9中，它工作得很好。

在Chrome 15.0.874.121，它减慢可怕的。它可以正常工作到500div左右，然后基本上就会崩溃。

有人知道为什么会这样吗?

另外，设置显示为一次"阻止"一个会影响性能吗?或者是重绘完成后JS完成?(我猜这可能是浏览器之间的差异)。如果是，我如何更改显示属性en-mass?

问候,戴兹。

Answer 1

您可以尝试在连续调用中添加setTimeout，以允许浏览器在两者之间重新绘制，而不是锁定整个窗口。分批执行，因为setTimeout会增加相当大的延迟:~10ms每个呼叫。

一般来说，控制浏览器的行为是不可能的。在一个浏览器中有效的功能在另一个浏览器中可能根本不起作用。一般来说，选择最简单的解决方案，并祈祷它将在后续版本中修复。

这确实回避了问题。你为什么要在一页上写这么多的潜水?难道你不能把它们都放到一个div中，然后显示/隐藏吗?

Answer 2

首先，感谢@FritsvanCampen和@Walkerneo。他们的建议使我尝试以下方法…

在隐藏每个元素之前使用:

document.getElementById('div'+i).style.display = '';

我按照@Walkerneo的建议做，隐藏父div。然后我按照@FritsvanCampen的建议做，并在做任何其他事情之前使用setTimeout。代码如下:

document.getElementById('PARENT').style.display = 'none';
setTimeout("showAllTheDivs()",1);

因此，问题浏览器(chrome)将不再尝试一次放置一个div。

这似乎是一个bug，因为它在Explorer或Firefox中不明显，然而，这个解决方案似乎有效。我很想知道人们是否认为1毫秒的超时会给我带来问题。不过现在看来已经足够好了!

再次感谢@FritsvanCampen和@Walkerneo。