改进 #1:
如@Petr Averyanov所建议,使用变量而不是函数调用。
将代码从:
ng-repeat="serviceSchedule in getServiceScheduler(institutionUserConnection)"
改为:
ng-repeat="serviceSchedule in preCalculatedServicesObjectInScope"
为此,您需要在控制器中进行其他逻辑更改,您必须自己管理getServiceScheduler(institutionUserConnection)
结果何时实际更改,但这将增加性能。
改进 #2:
如果行的值一旦呈现就不会更改,请使用仅评估一次的变量。这将显着减少监视程序并帮助提高整体性能:
```html
<tr ng-repeat="institutionUserConnection in someScopeVariable">
<td>{{ ::institutionUserConnection.user.firstname }} {{ ::institutionUserConnection.user.lastname }}</td>
</tr>```
改进 #3:
在ng-repeat
中使用track by
语句。Angular.js通常使用特殊哈希函数$id
来检查/尝试识别每个对象在ng-repeat
中的身份。然而,由于数组中自然而然地存在一个标识符(且应该存在),因此你可以让ng-repeat
使用它而不是创建自己的ID。例如:
<tr ng-repeat="x in someScopeVariable track by x.id">
改进 #4:(变得更加刻意)
无论你做什么,由于你的数组很大,你可能无法提高足够的性能。那么你应该问自己这个问题,人们是否真的能在一眼看到600项?不行,它不能适合页面。因此,你可以截断无法适配页面的部分,每次只渲染需要呈现的DOM元素。为此,你可以使用limitTo
过滤器:
<tr ng-repeat="x in someScopeVariable | limitTo: visual.limitValue">
你可以在开始时将visual.limitValue
设置为一个合理的计数,例如10
,在表格的scroll
上增加它以在用户即将到达底部时增加它,从而导致DOM的部分追加到页面。然而,这种hack需要页面中的样式和代码更改。
改进 #5:(最刻意的一种方法,但它有效)
如果每行的维度是恒定的,使用滚动位置和行的尺寸,你可以计算出哪些行应该可见,然后只呈现它们。我写了一个指令来练习,命名为uber-repeat
并测试了它与60,000个行,性能非常出色,即使在手机上也是如此!
我认为有一个项目在这里使用了类似的方法:angular-vs-repeat