我有几千个javascript对象需要显示和滚动。我有什么选择？

我正在设计一个包含用户“联系人”列表的可滚动框

用户最多可以有10000个联系人

现在假设所有联系人都已在内存中，我只是简单地尝试绘制它们。如果您想对在浏览器中加载10k项数据的明智性发表意见，请

我见过两种技术，可以在可滚动框中管理这样一个巨大的列表

把它们都装进去 这似乎就是gmail显示联系人的方式。我目前在gmail中有2k个联系人。如果我点击“所有联系人”，我会得到一个短暂的延迟，然后右边的滚动框开始填满联系人。看起来他们正在将任务分解成块，可能将DOM添加分离成更小的步骤，并将这些步骤放入超时，以便在流程完成时不冻结整个接口

优点：

• 易于实现
• 按照设计使用的方式使用本机UI元素
• 谷歌做到了，一定没问题

缺点

• 不是很快——即使在我运行Firefox的开发机器上，也会有一些延迟。对于运行运行IE6的较慢机器的用户来说，可能会有相当多的延迟
• 我不知道我能允许DOM增长到多大有什么样的限制，但在我看来，我能添加到DOM中的节点数量肯定有一些限制。如果我要求旧计算机上的旧浏览器在DOM中容纳10k节点，它将如何反应

根据需要抽签 这似乎是雅虎处理显示联系人列表的方式。创建一个可滚动的框，在其中放置一个超高的空占位符，并且仅当用户滚动显示联系人时才绘制联系人

优点：

• DOM节点仅在需要时绘制，因此加载时几乎没有延迟，并且使用太多DOM节点重载浏览器的风险也小得多

缺点：

• 实现起来更复杂，bug出现的机会也更多。例如，如果我在页面加载后立即在yahoo mail联系人管理器中快速滚动，我就能够让联系人一个接一个地加载。当然，bug是可以解决的，但显然这种方法会引入更多bug

• 仍然有可能添加大量DOM节点。如果用户在整个列表中缓慢滚动，每个项目都会被绘制出来，我们仍然会得到一个巨大的DOM

---

有没有其他常用的方法来显示一个巨大的列表？每种方法都有更多的优点或缺点吗？使用这两种方法中的任何一种都有经验/问题/成功吗？

我会将DOM写入分为可处理的数量（例如，25或50），然后根据需要绘制分块。在提取的数量变得相当大之前，我不会担心删除旧的DOM元素

我会将联系人划分为块，并保持一种视图缓冲区的活动状态，当用户滚动列表时，该缓冲区会更改哪些块被写入DOM。这样，dom元素的总数永远不会超过某个阈值。然而，实施起来可能相当棘手

使用此方法，您还可以根据浏览器的性能（动态性能优化）动态修改块的大小和缓冲区的大小，这可能会有很大帮助

然而，实现它绝对不是件小事

---

您在Yahoo中看到的bug可能是由于绝对定位元素造成的：如果您保持CSS简单，避免绝对/相对定位您的联系人条目，它就不会发生。

谢谢warfangle。如果我线性加载块（即，如果我要绘制第200行，首先绘制第1-199行），我可以避免yahoo所做的绝对定位。如果我不使用ABolute定位，我不知道如何在没有199的情况下定位第200行，将其向下推。通过查看缓冲区，您是否在谈论这样的事情：这个答案中概述的相同技术已经以插件的形式实现。