Javascript 带有大量数据的 AngularJS 无限滚动

AngularJS Infinite Scrolling with lots of data

提问by gordon

So I'm trying to create an infinite scrolling table using AngularJS, similar to this: http://jsfiddle.net/vojtajina/U7Bz9/

所以我正在尝试使用 AngularJS 创建一个无限滚动表，类似于：http: //jsfiddle.net/vojtajina/U7Bz9/

The problem I'm having is that in the jsfiddle example, if I keep scrolling till I have a million results, the browser is going to slow to a crawl, wouldn't it? Because there would now be 1,000,000results in $scope.items. It would be better if I only ever had, for example, 1000results at a time inside $scope.items, and the results I was viewing happen to be within those 1000.

我遇到的问题是，在 jsfiddle 示例中，如果我一直滚动到有 100 万个结果，浏览器的速度会变慢，不是吗？因为现在1,000,000$scope.items 中会有结果。例如，如果我一次只1000在 $scope.items 中有结果，而我正在查看的结果恰好在这些1000.

Example use case: page loads and I see the first 10results (out of 1,000,000). Even though I only see 10, the first 1000results are actually loaded. I then scroll to the very bottom of the list to see the last 10items. If I scroll back up to the top again, I would expect that the top 10results will have to be loaded again from the server.

示例用例：页面加载，我看到第一个10结果（超出1,000,000）。即使我只看到10，第一个1000结果实际上已加载。然后我滚动到列表的最底部以查看最后一个10项目。如果我再次向上滚动到顶部，我希望顶部的10结果必须再次从服务器加载。

I have a project I did with ExtJS that a similar situation: an infinite scrolling list with several thousand results in it. The ExtJS way to handle this was to load the current page of results, then pre-load a couple of extra pages of results as well. At any one time though, there was only ever 10pages of results stored locally.

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

So I guess my question is how would I go about implementing this in AngularJS? I kow I haven't provided much code, so I'm not expecting people to just give the coded answer, but at least some advice in which direction to go.

所以我想我的问题是我将如何在 AngularJS 中实现它？我知道我没有提供太多代码，所以我不希望人们只给出编码答案，但至少会给出一些建议。

采纳答案by gordon

So turns out that the ng-gridmodule for AngularJS has pretty much exactly what I needed. If you look at the examples page, the Server-Side Processing Example is also an infinite scrolling list that only loads the data that is needed.

事实证明，AngularJS的ng-grid模块几乎完全满足了我的需求。如果你查看示例页面，服务器端处理示例也是一个无限滚动的列表，它只加载需要的数据。

Thanks to those who commented and answered anyway.

感谢那些无论如何评论和回答的人。

Latest URL : ng-grid

最新网址：ng-grid

回答by Ben Lesh

A couple of things:

几件事：

1. "Infinite scrolling" to "1,000,000" rows is likely to have issues regardless of the framework, just because you've created millions and millions of DOM nodes (presuming you have more than one element in each record)

2. The implementation you're looking at doing with <li ng-repeat="item in items">{{item.foo}}</li>or anything like that will have issues veryquickly for one big reason: {{item.foo}}}or any ngBind like that will set up a $watchon that field, which creates a lot of overhead in the form of function references, etc. So while 10,000 small objects in an "array" isn't going to be that bad... 10,000-20,000 additional function references for each of those 10,000 items will be.

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

2. 你看有这样的实现<li ng-repeat="item in items">{{item.foo}}</li>之类的东西都会有问题，非常快速的一个大原因：{{item.foo}}}或任何ngBind类似，将成立一个$watch在该领域，这在函数引用等形式创造大量的开销. 因此，虽然“数组”中的 10,000 个小对象不会那么糟糕......对于这 10,000 个项目中的每一个，将有 10,000-20,000 个额外的函数引用。

What you'd want to do in this case would be create a directive that handles the adding and removing of DOM elements that are "too far" out of view as well as keeping the data up to date. That should mitigate most performance issues you might have.

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

... good infinite scrolling isn't simple, I'm sorry to say.

...好的无限滚动并不简单，我很抱歉地说。

回答by jfountain

I like the angular-ui implementation ui-scroll...

我喜欢 angular-ui 实​​现 ui-scroll ...

https://github.com/angular-ui/ui-scroll

https://github.com/angular-ui/ui-scroll

... over ngInfiniteScroll. The main difference with ui-scroll from a standard infinite scroll is that previous elements are removed when leaving the viewport.

...超过ngInfiniteScroll。ui-scroll 与标准无限滚动的主要区别在于，当离开视口时，先前的元素会被删除。

From their readme...

从他们的自述...

The common way to present to the user a list of data elements of undefined length is to start with a small portion at the top of the list - just enough to fill the space on the page. Additional rows are appended to the bottom of the list as the user scrolls down the list.

The problem with this approach is that even though rows at the top of the list become invisible as they scroll out of the view, they are still a part of the page and still consume resources. As the user scrolls down the list grows and the web app slows down.

This becomes a real problem if the html representing a row has event handlers and/or angular watchers attached. A web app of an average complexity can easily introduce 20 watchers per row. Which for a list of 100 rows gives you total of 2000 watchers and a sluggish app.

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

这种方法的问题在于，即使列表顶部的行在滚动出视图时变得不可见，它们仍然是页面的一部分并且仍然消耗资源。随着用户向下滚动，列表会增长，而 Web 应用程序会变慢。

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

Additionally, ui-scroll is actively maintained.

此外，ui-scroll 得到积极维护。

回答by PowerKiKi

It seems that http://kamilkp.github.io/angular-vs-repeatwould be what you are looking for. It is a virtual scrolling directive.

看来http://kamilkp.github.io/angular-vs-repeat就是你要找的。它是一个虚拟滚动指令。

回答by HasanAboShally

You may try using ng-infinite-scroll :

您可以尝试使用 ng-infinite-scroll ：

http://binarymuse.github.io/ngInfiniteScroll/

http://binarymuse.github.io/ngInfiniteScroll/

回答by Bernardo Ramos

Check out virtualRepeatfrom Angular Material

从 Angular Material查看virtualRepeat

It implements dynamic reuse of rows visible in the viewport area, just like ui-scroll

它实现了视口区域可见行的动态复用，就像 ui-scroll