更改 div 集合的 Display 属性会破坏 Chrome +速度非线性增长
假设我在一个页面上有大量（> 1000）的 DIV。每个都有一个 id，格式为 'div' + [0-n]
如果我然后迭代它们并调用：
document.getElementById('div'+i).style.display = 'none';
它的工作效率非常高。如果有 2.5k+ div，它们几乎都会立即消失。
但是，如果我随后迭代它们并调用：
document.getElementById('div'+i).style.display = '';
可以理解的是，它会变慢。这些项目需要重新绘制和放置。
在 Explorer 9 和 Firefox 9 中，它运行得很好。
在 Chrome 15.0.874.121 中，速度明显减慢。它在 500 div 左右工作正常，然后就基本上崩溃了。
有谁知道为什么会出现这种情况？
另外，将显示设置为一次“阻止”一个会影响性能吗？还是JS完成后就重绘了？ （我猜这可能是浏览器之间的差异）。如果是这样，我如何整体更改显示属性？
问候， 达兹。
Let's say I have a large number (> 1000) of DIVs on a page. Each has an id in the format of 'div' + [0-n]
If I then iterate through them and call:
document.getElementById('div'+i).style.display = 'none';
It works extremely efficiently. With 2.5k+ divs, they all disappear almost immediately.
However, if I then iterate through them and call:
document.getElementById('div'+i).style.display = '';
Understandably, it's slower. These items need to be redrawn and placed.
In Explorer 9, and Firefox 9, it works perfectly.
In Chrome 15.0.874.121 it slows down horribly. It works fine up to a around 500 divs, and then essentially breaks.
Does anyone know why this would be the case?
Also, does setting display to 'block' one at a time impact performance? Or is the redrawing done once the JS has completed? (I'm guessing this might be the difference between the browsers). If so, how do I change the display property en-mass?
Regards,
Daz.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您可以尝试在连续调用中添加
setTimeout，以允许浏览器在中间重新绘制，而不是锁定整个窗口。批量执行这些操作是因为setTimeout确实会增加相当大的延迟：每次调用~10ms。一般来说，控制浏览器的行为是不可能的。在一种浏览器中有效的内容可能在另一种浏览器中根本不起作用。一般来说，选择最简单的解决方案，并祈祷它将在后续版本中得到修复。
这确实引出了一个问题。为什么一页上有这么多 div？难道你不能把它们全部放在一个 div 中并显示/隐藏它吗？
You could try adding a
setTimeoutto consecutive calls to allow the browser to repaint in between and not lock up the entire window. Do them in batches becausesetTimeoutdoes add a considerable delay:~10msper call.In general it's impossible to control what a browser does. What works in one browser may not work at all in another. In general pick the most simple solution and pray it will be fixed in a successive version.
This does beg the question. Why do you have so many divs on one page? Couldn't you just put them all in one div and show/hide that?
首先，感谢@FritsvanCampen 和@Walkerneo。他们的建议引导我尝试以下操作......
在隐藏每个元素之前使用：
我按照@Walkerneo的建议进行操作并隐藏父div。然后，我按照 @FritsvanCampen 的建议进行操作，并在执行其他操作之前使用 setTimeout 。代码如下：
因此，有问题的浏览器（chrome）将不再尝试一次放置一个div。
这似乎是一个错误，因为它在资源管理器或 Firefox 中并不明显，但是，此解决方法似乎有效。我很想听听人们是否认为我会遇到 1 毫秒超时的问题。不过目前看来已经足够好了！
再次感谢@FritsvanCampen 和@Walkerneo。
Firstly, thanks to @FritsvanCampen and @Walkerneo. Their suggestions led me to try the following...
Before hiding each element using:
I do as @Walkerneo suggested and hide the parent div. I then do as @FritsvanCampen suggested, and use a setTimeout before doing anything else. The code is as follows:
Hence, the problem browser (chrome), will no longer try to place the divs one at a time.
This seems like a bug, as it's not apparent in Explorer or Firefox, however, this workaround seems to work. I would be interested to hear whether people think I'd encouter problems with a timeout of 1ms. Seems good enough for now though!
Thanks again to @FritsvanCampen and @Walkerneo.