javascript - Ng-Repeat on Same Collection，通过应用程序多次使用

Question

这个问题更多地与优化/性能有关。假设我有一个数据数组

scope.array = [1,2,3,5,...,1000];

我需要对这些元素运行 ng-repeat，如下所示:

<div class="table" ng-repeat="a in array"> {{a}} </div>

实际上，我什至不确定上述内容是否严格准确，但这与问题的目的无关。现在假设 div 在多个地方使用，也许像这样......

<div class="parent" ng-repeat="child in children">
    <div class="table" ng-repeat="a in array"> </div>
</div>

div.table 的每次重复都会实例化 1000 个新范围元素，即使它是在同一数据集上重复。如果数据绑定(bind)在功能上是单向的，即用户无法实际操作该集合，那么哪种模式允许您阻止所有这些冗余作用域创建？

Answer 1

你无法避免子作用域的创建，这是 Angular 工作原理的关键部分。尽管这里真正的问题是 watch 的总数，而不是瞄准镜的创建。示波器的创建是一个小型的一次性操作，但 watch 会随着行的生命周期而持续存在。

例如，采用一个包含 1,000 行和 10 列的表。渲染整个表将导致创建 10,000 个监视表。任何浏览器都无法应对如此多的 watch 数量，并且会导致 UI 延迟问题。

但是为什么要为用户不可见的元素创建行和监视呢？这个特殊问题并不是一个新问题，解决方案是使用虚拟缓冲。现有的 Angular 指令例如 https://github.com/EnzeyNet/VirtualScroll和 https://github.com/kamilkp/angular-vs-repeat已经为您完成了此操作。

基本思想是，如果您有 100,000 个数据集，您一次只能在屏幕上看到 N 个数字，可能是 10-40，因此仅渲染 View 中的那些行。