在 dom 变慢并变得不稳定之前，您可以拥有多少个 div？答案

【问题标题】：how many div's can you have before the dom slows and becomes unstable?在 dom 变慢并变得不稳定之前，您可以拥有多少个 div？
【发布时间】：2011-02-24 19:06:20
【问题描述】：

我正在开发一个 jQtouch 应用程序，通过 ajax 完成的每个请求都会在文档中为加载的内容创建一个新的 div。任何时候都只显示一个 div。

在应用开始变得无响应和缓慢之前，我可以拥有多少个 div？

有人对此有什么想法吗？

编辑：它是一个在 Safari 上运行的 iPad 应用程序，它的内容非常基本，不到 1000 个 div

【问题讨论】：

测试。那你就知道了。

标签： html dom xhtml jqtouch

【解决方案1】：

我在屏幕上同时显示了数万个，甚至可能是十万个 div。性能好坏取决于：

从 HTML 解析还是在 JavaScript 中动态生成？

从 HTML 解析意味着你有一个 LARGE 的 html 源代码，这会使浏览器挂起。在 JS 中生成的速度惊人地快，即使是在所有 JS 浏览器中最慢的 Internet Explorer 上也是如此。

【讨论】：

有趣...这是有道理的，但根据我的经验，没有什么能像很多 javascript 一样冻结浏览器。因此，挑战在于分解生成脚本并确保它屈服于介于两者之间的 UI。
确实解析的 JS 速度快得惊人！

【解决方案2】：

说实话，如果您真的需要这个问题的绝对答案，那么您可能需要重新考虑您的设计。

这里没有给出正确的答案，因为它取决于许多特定于您的应用程序的因素。例如。 CSS 使用量大还是少、div 的大小、每个 div 所需的实际图形渲染量、目标浏览器/平台、DOM 事件侦听器的数量等。

仅仅因为你可以并不意味着你应该！ :-)

【讨论】：

【解决方案3】：

正如其他人所说，真的没有答案。

然而，在这次关于 Google Maps API 版本 3 的演讲中，演讲者多次提到了数字 ten thousand，作为浏览器不快乐的基本阈值。

http://code.google.com/apis/maps/documentation/javascript/

【讨论】：

它来自无名道 // 天地出现 // 有名不过 // 万物之母。

【解决方案4】：

如果不定义特定环境，就无法回答您的问题。

即便如此，任何人告诉你的任何事情都只是猜测。您需要使用不同的浏览器和硬件对实际配置进行自己的测试。您还需要建立一些性能基准来确定“太慢”的含义。

【讨论】：

【解决方案5】：

我已经能够毫无问题地添加数千个 div。当然，这取决于您之后要做什么，以及客户端计算机上的内存。其他人都是对的。

正如 Harpo 所说，10K 可能是一个不错的上限。有一次，我注意到从大约 4K div 开始出现速度问题，但此后硬件有所改进。

而且，正如 Neil N 所说，通过脚本添加 div 比拥有庞大的 HTML 源代码更好。

而且，为了回答 Harpo 的评论，一种“分解”以便 JS 不会锁定页面并产生“页面运行缓慢”错误的方法是在每个“添加一个div”例程，然后计时器再次调用您的“添加 div”函数。

现在，我的问题是：是否可以“绘制”这样您就不需要添加数千个 div？这可以通过某些浏览器的 canvas 标签来完成，但我认为在 IE 上使用 VML（excanvas 项目）是不可能的。或者是吗？我认为 VML 通过向 DOM 添加新元素来“绘制”，此时您也可以使用 DIV，除非它是一个简单的形状。

是否可以通过脚本更改图像的来源？（当然是 DOM 中的图像——不是服务器上的原始图像。）

【讨论】：