Web页面中允许的最大div数量是多少？

Question

Web页面中允许的最大div数量是多少？

javascriptjqueryinternet-explorerhtml

12

您好，我想知道网页上允许有多少个div？

比如说，如果一个网页有一千个div，Internet Explorer是否会开始变慢？

- Sau

10

如果你不得不问这样的问题，很可能是你正在做错什么。 - Mitch Wheat

1

如果您的页面具有这种设计，允许的div数量并不是您最大的问题。 - Andreas Wong

2

我不认同设计有问题。我写了搜索功能，允许人们列出100、250或1000个项目，并需要div来动态地更改它们的内容。问题是是否存在限制，答案是没有，但现实情况建议设置上限。 - RichM

2个回答

1

有两个方面需要考虑。其中一个是内存，DOM节点占用了大量的空间。另一个是CPU时间，需要重新渲染所有这些节点当有变化时。平滑渲染的阈值取决于所使用的引擎。根据我的经验，IE远远落后，几百个节点后就开始出现问题。Firefox可以处理几千个节点，而对于像Chrome这样的WebKit浏览器来说，情况差不多（甚至更好一些）。

- Delan Azabani

感谢您的输入！在网上找到这种信息很难。 - Sau

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Phil · Accepted Answer

我知道这是一篇旧文章，但最近我做了一个与此话题直接相关的测试，我想分享我的结果。

我创建了一个简单的php脚本，输出x个5像素×5像素的内联块状div，以测试浏览器的稳定性和页面滚动性能。

在页面上放置1000个div时，IE9、Firefox和Chrome都没有任何问题，甚至在滚动时也没有任何问题。

当放置10000个div时，IE9和Chrome能够滚动，只有轻微的延迟，仍然在我的“可接受”范围内，但是Firefox开始明显地滞后，你会感觉滚动条比应该滚动的时间晚了半秒钟。

有趣的是，在10000个div和100000个div之间的性能差异并不像你想象的那么大。IE9和Chrome的滚动只有轻微的延迟（其中Chrome稍微更平滑一些），而Firefox的延迟非常明显，可能会被认为很烦人，但仍然可以正常使用（即不会崩溃）。

现在，在页面上放置500000个div，真正变得有趣了。IE9崩溃并尝试重新启动（当然，在同一个页面上），然后再次崩溃，在这一点上，我将其正确关闭、重新启动，并再次尝试确保会出现相同的结果。结果也确实如此。

Chrome保持稳定，但由于延迟太大，几乎不可能滚动页面。

最令人惊讶的是Firefox，在100000个div时比较慢，而在500000个div时几乎与Chrome差不多...滚动不够平滑，但要比Chrome好得多。

令人惊讶的是，在页面上放置1000000个div的结果几乎相同！Firefox处理它们时没有崩溃，并且虽然有些缓慢，但仍然可以滚动。IE9崩溃了。而Chrome能够加载页面，但速度变得非常慢，几乎无法使用。

我知道这不是一项严谨的科学研究，但我认为除了自己以外，可能还有其他人会对此感兴趣。

在一台配备双Xeon处理器和4GB内存的戴尔工作站上运行Windows 7进行了测试。