ngRepeat 中复杂的 HTML 结构与深度 Scope 对象使事情变慢答案

【问题标题】：Complex HTML structure in ngRepeat with a deep Scope object makes things slowngRepeat 中复杂的 HTML 结构与深度 Scope 对象使事情变慢
【发布时间】：2016-05-05 08:12:13
【问题描述】：

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

我的问题是我的重复变得非常缓慢。页面难以加载，滚动同样滞后。基本暂时不能用。我想我正在尝试找出一些使用多个嵌套重复的最佳实践，然后是复杂的 HTML 结构。

提前感谢您的帮助。

【问题讨论】：

你可以使用单向绑定来防止 DOM 重新渲染
@MarkoCen 目前我只是像这样将信息放入部分中。 {{someInfo}}。只需将行程应用于 $scope.Itineraries 即可传入行程。我最初必须遍历它们，所以不确定这是否适用？

标签： javascript html css angularjs angularjs-ng-repeat

【解决方案1】：

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

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

我知道有时这会很棘手，所以我有一个小要点，在 github 上有一个简单的中继器

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

这个想法是用虚拟重复替换你的 ng-repeat：

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

到这里：

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

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

希望对你有帮助:)

【讨论】：

谢谢，我去看看。保重