AngularJS ng-repeat性能

Question

我使用AngularJS ng-repeat来查看我的表元素(它不应该经常使用 - 我知道 - 但我不知道如何以其他方式执行)

这是我的示例如何在表中显示containerObjects:

http://jsfiddle.net/NfPcH/10390/

ng-repeat=...

我有很多包含对象(包括start,end和containerType)(每页大约600个),如表所示.显示视图花了大约3秒钟.

我现在的问题是,如果可以改进某些东西以提高性能.是否有可能更换/更改ng-repeat以减少加载时间.

非常感谢!

[编辑]

我也有这个函数调用,但我不知道如何阻止函数调用.有没有人知道如何改进这个？非常感谢 !

ng-repeat="serviceSchedule in getServiceScheduler(institutionUserConnection)">

function getServiceScheduler(institutionUserConnection) {
        if(institutionUserConnection.scheduler != null) {
            var serviceSchedules = institutionUserConnection.scheduler.serviceSchedules;
            return serviceSchedules[Object.keys(serviceSchedules)[0]];          
        } else {
            return null;
        }
    }

Answer 1

改进#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:

使用track by声明ng-repeat.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