Question

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

这是我的示例，我将如何在表格中显示 containerObjects ：

ng-repeat=...

我有很多 containsObjects（包含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建议的那样，使用变量而不是函数调用。

代替： getServiceScheduler(institutionUserConnection)"

将您的逻辑更改为： ```html <tr ng-repeat="institutionUserConnection in someScopeVariable"> <td>{{ ::institutionUserConnection.user.firstname }} {{ ::institutionUserConnection.user.lastname }}</td> </tr>```

要做到这一点，你需要在控制器中进行其他逻辑更改，你必须管理$id的结果何时实际改变自己，但它会提高性能。

改进＃2：

Use variables that are evaluated once如果行的值在渲染后永远不会改变。这将大大减少观察者并帮助您提高整体表现：

ng-repeat

改进＃3：

Use track by statement in ng-repeat。 Angular.js通常会检查/尝试使用ng-repeat中的特殊哈希函数<tr ng-repeat="x in someScopeVariable track by x.id">来识别哪个对象。但是，你自然拥有数组中每个对象的标识符（你应该），你可以让limitTo使用它而不是创建它自己的id。例如：

<tr ng-repeat="x in someScopeVariable | limitTo: visual.limitValue">

改进＃4 :(在这里变得更加讨厌）

无论你做什么，由于阵列很大，你可能无法提高性能。然后你应该问这个问题，人们真的一眼就能看到600件物品吗？不，它不适合页面。因此，您可以删除不适合页面的部分，从而减少要一次渲染的DOM元素。为此，您可以使用visual.limitValue过滤器：

10

您可以在scroll开头uber-repeat使{{1}}合理计数，并且可以在表{{1}}上增加{{1}}，以便在使用即将到达时增加{{1}}底部，导致DOM部分追加到页面。但是，这个hack需要在页面中更改样式和代码。

改进＃5 :(最黑的一个，但它有效）

如果每行的尺寸不变，使用滚动位置和行的尺寸，您可以计算哪些行应该可见，并且您只能渲染它们。我已经为练习写了一个指令，命名为{{1}}并用60.000行测试它，即使在手机中，性能也很惊人！

我认为有一个项目在这里采用了一些相同的方法：angular-vs-repeat

AngularJS ng-repeat性能

1 个答案: