如何在庞大的数据集（angular.js）上提高ngRepeat的性能？

Question

我有一个巨大的数据集，其中包含数千行，每个行有大约10个字段，大约2MB的数据。我需要在浏览器中显示它。最简单的方法（获取数据，将其放入$scope，ng-repeat=""完成工作）可以很好地工作，但是当它开始将节点插入DOM时，它会使浏览器冻结大约半分钟。我应该如何解决这个问题？一种选择是将行逐行追加，$scope并等待ngRepeat完成向DOM中插入一个块后再移至下一个。但是AFAIK ngRepeat在完成“重复”操作时不会返回报告，因此会很丑陋。另一种选择是将服务器上的数据拆分为页面，然后在多个请求中获取它们，但这更加丑陋。我浏览了Angular文档以查找类似的内容ng-repeat="data in dataset" ng-repeat-steps="500"，但未找到任何内容。我对Angular的方法还很陌生，所以有可能我完全忘记了要点。最佳做法是什么？

Answer 1

lonic的collectionRepeat指令和类似的其他实现方法体现了最热且可以说是最具扩展性的方法来克服大型数据集的这些挑战。一个比较好的术语是“遮挡剔除”，但您可以将其总结为：不要仅仅将呈现的DOM元素的数量限制为任意（但仍然很高）的分页数，例如50、100、500 ... ，只能将其限制为用户可以看到的尽可能多的元素。

如果执行类似“无限滚动”的操作，则可以减少初始 DOM计数，但是经过几次刷新后它会很快膨胀，因为所有这些新元素都位于底部。滚动成为爬网，因为滚动全部与元素计数有关。没有什么是无限的。

而collectionRepeat方法是仅使用视口中适合的尽可能多的元素，然后对其进行回收。当一个元素旋转到视图外时，它会与渲染树分离，重新填充列表中新项目的数据，然后重新附加到列表另一端的渲染树。这是人类已知的最快方法，它利用有限的现有元素集来获取和接收DOM中的新信息，而不是传统的创建/销毁...创建/销毁周期。使用这种方法，您可以真正实现无限滚动。

请注意，您不必使用Ionic即可使用/ hack / adapt collectionRepeat或类似的任何其他工具。这就是为什么他们称其为开源。:-)（也就是说，Ionic团队正在做一些非常巧妙的事情，值得您注意。）

至少有一个出色的示例，可以在React中完成非常类似的操作。您只是选择不对树中未显示的任何内容进行渲染，而不是对具有更新内容的元素进行回收。尽管它们非常简单的POC实施允许一些闪烁，但它可以快速处理5000个项目。

另外... track by即使在数据集较小的情况下，使用它也会非常有用，以回应其他一些帖子。认为它是强制性的。