具有深度Scope对象的ngRepeat中的复杂HTML结构会使事情变得缓慢

时间:2016-05-04 23:19:29

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

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

我的问题是我的重复变得非常缓慢。页面很难加载和滚动同样有点滞后。基本上一分钟都不可用。我想我想弄清楚使用多个嵌套重复的一些最佳实践,然后是复杂的HTML结构。

提前感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

您需要创建虚拟转发器。您可以在网络中使用其中一种解决方案,也可以烘焙您自己创建的一种解决方案。

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

我知道有时这会变得棘手所以我在github中有一个带有简单重复的小小的要点

您可以在此处找到它:https://gist.github.com/scyrizales/f2a297db522e2d789f69f70e7151ce7e

我们的想法是用虚拟重复替换你的ng-repeat:

Offset of: 1
BCDE
B
Offset of: 2
CDE
C
Offset of: 3
DE
D
Offset of: 4
E
E

Offset of: 0
ABCDE
A
Offset of: 1
BCDE
B
Offset of: 2
CDE
C
Offset of: 3
DE
D
Offset of: 4
E
E

Offset of: 1
BCDE
B
Offset of: 2
CDE
C
Offset of: 3
DE
D
Offset of: 4
E
E

Offset of: 0
ABCDE
A
Offset of: 1
BCDE
B
Offset of: 2
CDE
C
Offset of: 3
DE
D
Offset of: 4
E
E

到此:

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

我建议你只在你的外转发器中使用它,我的解决方案只允许重复数组(所以收集应该是一个数组)

我希望这可以帮助你:)。