Mass Dom 操纵答案

【问题标题】：Mass Dom manipulationMass Dom 操纵
【发布时间】：2010-11-08 22:20:34
【问题描述】：

我想知道是否有人可以在不冻结浏览器的情况下使用 jquery 进行 dom 操作的最高级别提供一些安全指南。

也是大规模 DOM 操作的最佳方法。

基本上任何时候我都可以处理多达 40k li 的列表

我真正在做的只是显示一个，隐藏另一个。

这是我的问题

理论上我一次可以操作多少 li 而不会导致浏览器崩溃？
我应该如何与李氏合作？
- 作为单个对象进行操作（ul 级别）
- 循环遍历第一个列表中的每个 li，删除它们，然后循环插入每个新的 li。
- 循环遍历 li 的块（如果是的话，一次有多大 10、100、1000、10000？）
我应该如何获取数据？（json格式）
- 在一次 ajax 调用中获取整个列表（价值 40k li）的数据。
- 在页面创建时为每个列表插入数据（可能超过 20 个列表 = 800,000 里
- 执行几次 ajax 调用来获取数据（如果是的话，一次 10、100、1000、10000 有多大？）

【问题讨论】：

嗯。 40k li 秒？那是很多。谁会看着它们？您是否考虑过延迟加载或分页？
对于每个不同的浏览器实现，答案都会大不相同。我认为这个问题的答案将来自你自己进行的测试，而不是这里提供的任何答案。
正如@Pekka 所说，为什么不分页？这么大的 DOM 会惹恼你的用户。
我们使用虚拟机或将您的 RAM 限制为 1G 以进行测试。我建议将计时器集成到您的循环函数中，以便当计时器超过某个持续时间时，您可以在继续迭代之前设置一个短暂的超时。理想情况下，它会让浏览器在继续长时间的进程之前喘口气。
好的，伙计们，我会尝试分页，下一个问题是，假设我加载了一个组，我查看了 5 个页面，我应该将这些页面（作为变量）存储在任何地方，所以我可以快速再次加载它们，或者每次都获取它们。我正在考虑内存使用等。

【解决方案1】：

如果你真的想操纵这么多，那么你可能应该采用http://developer.yahoo.com/yui/3/async-queue/之类的东西

作为一次应该使用多少个的答案，您可以构建一个校准，查看最后一组完成的速度，并相应地使用更多/更少。这可以为您提供适用于从桌面 chrome 到移动 IE 的所有内容。

ajax 调用也是如此，使其能够根据网速加速。

【讨论】：

【解决方案2】：

作为警告：这在很大程度上取决于您的计算机性能。坦率地说 - 在 DOM 操作中任何接近 100 个元素的东西都开始变得有点愚蠢和昂贵。也就是说：

1) 取决于您的系统，我的旧系统最高可达 30 左右，而我的新系统在我破坏之前可以达到 120。

2) 在尽可能大的层面上与他们合作。处理一个包含一堆 li 的 ul 比处理一堆 li 快得多。使用 jQuery 并将对象存储在一个变量中（这样您就不会在每次使用 DOM 时都查询它）以提高性能。

3) 最初加载用户将看到的第一个数据，然后以类似大小的批次获取它。如果你一次只能看到 20 li 元素，那么没有理由加载超过这个加上一点缓冲区（30？）。

【讨论】：