Javascript AngularJS无限滚动，包含大量数据

因此，我尝试使用AngularJS创建一个无限滚动表，类似于：

我遇到的问题是，在jsfiddle示例中，如果我一直滚动直到有一百万个结果，浏览器会慢到爬行，不是吗？因为$scope.items中现在将有

1000000个
结果。例如，如果我一次只能在$scope.items内获得
1000
结果，并且我正在查看的结果恰好在那些
1000
中，那就更好了

示例用例：页面加载，我看到第一个
10
结果（共
1000000
）。尽管我只看到
10
，但实际上加载了第一个
1000
结果。然后我滚动到列表的最底部，查看最后的
10
项。如果我再次向上滚动到顶部，我希望顶部的
10
结果必须再次从服务器加载

我有一个用ExtJS做的项目，类似的情况：一个无限滚动列表，其中有几千个结果。处理这个问题的ExtJS方法是加载当前的结果页面，然后预加载两个额外的结果页面。然而，在任何时候，本地存储的结果只有
10
页

所以我想我的问题是如何在AngularJS中实现它？我知道我没有提供太多的代码，所以我不希望人们只是给出编码的答案，而是至少给出一些朝哪个方向发展的建议。
以下几点：

无论框架如何，“无限滚动”到“1000000”行都可能会出现问题，因为您已经创建了数百万个DOM节点（假设每个记录中有多个元素）

您正在使用
{{item.foo}}
或类似的任何东西进行的实现很快就会出现问题，原因是：
{{item.foo}}
或任何类似的ngBind都会在该字段上设置一个
$watch
，这会以函数引用等形式产生大量开销。因此，虽然“数组”中的10000个小对象不会那么糟糕。。。这10000个项目中的每一个都将有10000-20000个额外的功能参考

在这种情况下，您需要做的是创建一个指令，该指令处理添加和删除“太远”的DOM元素，并使数据保持最新。这将缓解您可能遇到的大多数性能问题

。。。很抱歉，好的无限滚动并不简单。
因此，AngularJS模块几乎完全符合我的需要。如果查看，服务器端处理示例也是一个无限滚动列表，它只加载所需的数据

感谢那些评论和回答的人

最新URL:
您可以尝试使用ng无限滚动：

看来这就是你要找的。这是一个虚拟滚动指令。
我喜欢angular ui实现ui scroll


。。。过了一圈。ui滚动与标准无限滚动的主要区别在于，在离开视口时会删除以前的元素

从他们的自述中

向用户呈现未定义长度的数据元素列表的常用方法是从列表顶部的一小部分开始—刚好足以填充页面上的空间。当用户向下滚动列表时，列表底部会追加其他行

这种方法的问题是，即使列表顶部的行在滚动出视图时不可见，它们仍然是页面的一部分，并且仍然消耗资源。当用户向下滚动时，列表会增加，web应用程序的速度也会减慢

如果表示行的html附加了事件处理程序和/或角度观察程序，这将成为一个真正的问题。一个平均复杂度的web应用程序很容易每行引入20个观察者。对于100行的列表，总共有2000个观察者和一个缓慢的应用程序

此外，用户界面滚动被积极维护。
从角度材质中检出

它实现了对视口区域中可见行的动态重用，就像ui滚动一样
为什么角度实现与ExtJS实现有那么大的不同？换句话说，您在将ExtJS实现移植到Angular时遇到了什么问题？看起来您仍然需要预加载，只需调整$scope.items中的内容，而不是调整DOM中的内容（我猜ExtJS实现就是这样做的）。不要进行DOM操作，只需执行$scope操作，并让Angular自动更新视图。@MarkRajcok现在您已经说过这似乎很明显：P但是有一件事我仍然不知道如何做。在ExtJS中，无限滚动列表的滚动条给人的印象是所有数据都已加载，即我可以将滚动条移到底部，然后查看最后一项。在AngularJS中如何模拟这一点？这将很困难，因为AngularJS控制着视图的显示，并且当前的滚动条大小无疑与$scope.items的当前大小相关。您可能需要编写自己的指令来实现定制的可滚动容器（如果您真的认为需要此功能的话）。由于可用性、SEO、流量以及当您达到“1000000”行时与DOM相关的性能问题，无限滚动最近受到了广泛的关注。也许是时候重新考虑一下实现了。我认为react.js可以用在这样的场景中。我完全同意你所说的。我想做的只是实际加载“在视图中”的两行数据。我有点