如何加载大量数据？

Question

我从服务器获取5000个用户列表和他们的详细信息，我正在尝试显示这些记录。显示记录，但看到继续加载..并在加载后无法做任何事情。是否有任何解决方案加载5000记录而不加载和崩溃？

Answer 1

建议不要一次加载5000条记录，并尝试在浏览器中显示相同的记录。你需要使用分页。您无法将一些繁重的数据加载到浏览器上。它可能会崩溃或无法响应。使用分页一次只能带来10/20/30条记录，并提供分页按钮，这样用户就可以点击并导航到所需的页面。

有关如何进行分页的文章：http://www.c-sharpcorner.com/article/server-side-pagination-using-angularjs-web-api-and-sql-server/
- 如果您使用的是WebAPI

Answer 2

加载5000条记录的问题并非（仅）您收到了大量数据，但Angular必须处理摘要周期中的所有数据。我敢打赌，如果你在浏览器中进行分析，你会发现大部分CPU时间都花在了摘要循环中。

为避免您必须一次只允许页面上有限数量的DOM元素。如建议的那样，一种方法是使用分页。

另一种方法，你仍然加载你的5000条记录，就是使用一个名为虚拟重复/滚动的概念，你有一个指令只显示你的视口中可以容纳的元素（即在用户屏幕上），然后每当用户滚动时，该指令在下面添加更多元素，同时删除不在视图中的元素。这可以无缝完成，并可对性能产生巨大影响。

虚拟重复/滚动可能是您自己创建的一项艰巨任务，但幸运的是有几种不同的实现可用。我有Angular Virtual Scroll ngRepeat directive的经验，但也有其他人也可以这样做。