ngRepeat中复杂的超文本标记语言结构带有一个深度作用域对象，这会使速度变慢

Question

这更多的是询问人们可能遇到的意见或解决方案。我根据通过API获取的$scope对象呈现航空公司行程列表。总而言之，我遍历并显示在页面上的数组中最多可以有150个。这些行程在HTML/CSS方面相对复杂/繁重，这要归功于我们出色的设计机构。行程包括关于我在ngRepeat期间使用的20+属性。例如，航班时间、目的地、中途停留等。实际的行程对象很深，但我将循环限制在3-4个。尽可能地尝试基于直接访问旅程/行程索引来获取属性，而不是对子对象使用另一个重复。但在某些情况下，这是不可能的，我必须再次循环。

我的问题是我的重复变得非常慢。页面很难加载，滚动也同样迟缓。目前基本上不可用。我猜我正在尝试找出一些使用多个嵌套重复的最佳实践，然后是复杂的HTML结构。

提前感谢您的帮助。

Answer 1

您需要创建一个虚拟中继器。你可以在网络上使用其中一个解决方案，或者烘焙你自己的作品。

这个想法很简单，一次只渲染少量的“行”(要重复的元素)。

我知道有时这会变得很棘手，所以我在github中有一个小要点和一个简单的sometimes

你可以在这里找到它：https://gist.github.com/scyrizales/f2a297db522e2d789f69f70e7151ce7e

我们的想法是用virtual-repeat替换您的ng-repeat：

<div ng-repeat="item in collection"></div>

要这样做：

<div virtual-repeat="item in collection"></div>

我建议你只在你的外部中继器中使用它，我的解决方案只允许在数组上重复(所以集合应该是一个数组)

我希望这对您有帮助:)