网页中允许的最大 div 数答案

【问题标题】：Maximum number of divs allowed in web page网页中允许的最大 div 数
【发布时间】：2010-08-15 04:50:50
【问题描述】：

您好，我想知道网页上允许的 div 数量是否有限制？

例如，当 Internet Explorer 必须呈现具有一千个 div 的网页时，它会开始阻塞吗？

【问题讨论】：

如果你不得不问这样的问题，很可能你做错了什么......
如果您的页面采用这种设计，允许的 div 数量不是您最大的问题
我不同意设计是错误的。我编写的搜索允许人们列出 100、250 或 1,000 个项目，并且需要 div 来动态更改其内容。问题是是否有限制；答案是否定的，但现实主义建议有上限。

标签： javascript jquery internet-explorer html

【解决方案1】：

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

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

IE9、Firefox 和 Chrome 页面上的 1000 个 div 没有任何问题，甚至在滚动时似乎也不会打嗝。

在 10,000 div 时，IE9 和 Chrome 能够以几乎不明显的延迟滚动，仍在我书中的“可接受”范围内，但是 Firefox 开始明显滞后，以至于您感觉滚动条在跳跃比应有的位置晚半秒。

有趣的是，10,000 个 div 和 100,000 个 div 之间的性能差异并没有您想象的那么大。 IE9 和 Chrome 的滚动延迟几乎无法察觉（Chrome 在两者中稍微平滑一些），而 Firefox 的延迟非常明显，可能会被认为很烦人，但仍然运行良好（即它没有' t 崩溃）。

现在页面上有 500,000 个 div，它终于开始变得有趣了。 IE9 崩溃并尝试重新启动自身（当然是在同一页面上）并再次崩溃，此时我正确关闭它，重新启动它，并再次尝试以确保再次发生相同的结果。它做了。

Chrome 保持稳定，但由于极度延迟，几乎无法滚动页面。

最大的惊喜是 Firefox，100,000 div 的浏览器与 500,00 div 的浏览器几乎相同......滚动不流畅，但它比 Chrome 好得多。

令人惊讶的是，一个页面上 1,000,000 个 div 的结果几乎相同！ Firefox 处理它们时不会崩溃，并且虽然“矮胖”但仍可滚动。 IE9 崩溃了。 Chrome 能够加载该页面，但变得如此缓慢以至于几乎无法使用。

我知道这并不完全是一项科学研究，但我认为除了我自己之外的其他人可能会对它感兴趣。

测试是在配备双至强处理器和 4 GB 内存、运行 Windows 7 的戴尔工作站上进行的。

【讨论】：

加载时间怎么样？渲染这些 div 花了多少时间？
@Ismail 这个测试是几年前的事了，但我不记得渲染时间是一个主要问题。当 div 达到数十万+时，可能需要几秒钟。

【解决方案2】：

有两件事需要考虑。内存就是其中之一，其中 DOM 节点占用了大量空间。另一个是当某些事情发生变化时重新渲染所有这些节点所需的 CPU 时间。平滑渲染的阈值取决于使用的引擎。根据我的经验，IE 远远落后，数百后开始窒息。 Firefox 可能需要几千块，而对于 Chrome 等 WebKit 浏览器来说，它几乎相同（而且稍微好一点）。

【讨论】：

感谢您的意见！在网上很难找到这种信息。