AngularJS ng-repeat性能 [英] AngularJS ng-repeat performance

问题描述

我使用AngularJS ng-repeat来查看我的表元素(我不应该经常使用它-我知道-但我不知道如何通过其他方式来做到这一点)

I use AngularJS ng-repeat in order to view my table elements (it shouldn't be used very often - I know - but I don't know how to do it in an other way)

在我的示例中，我如何在表格中显示 containerObjects :

Here my example how I'am showing the containerObjects in table:

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

ng-repeat=...

我有很多 containedObjects(带有开始，结束和containerType)(每页大约600个)，如表所示. 显示该视图大约需要3秒钟.

I have a lot containedObjects (with start, end and containerType) (around 600 per page) which are shown in table. It took about 3 Seconds to show the view.

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

My question now would be, if something can be improved in order to improve performance. Is there a possibility to replace/change ng-repeat to decrease loading time.

非常感谢！

我也有此函数调用，但是我不知道如何防止该函数调用.有谁知道我可以如何改善这一点? 非常感谢！

I also have this function invocation but I have no idea how to prevent the function invocation. Does have anyone any idea how I could improve this? Thanks a lot !

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;
        }
    }

推荐答案

改进1:

按照@Petr Averyanov的建议，使用变量而不是函数调用.

As @Petr Averyanov suggested, use a variable instead of a function call.

代替: ng-repeat="serviceSchedule in getServiceScheduler(institutionUserConnection)"

将您的逻辑更改为: ng-repeat="serviceSchedule in preCalculatedServicesObjectInScope"

change your logic to: ng-repeat="serviceSchedule in preCalculatedServicesObjectInScope"

为此，您需要在控制器中进行其他逻辑更改，您必须管理getServiceScheduler(institutionUserConnection)"的结果实际更改自己的时间，但这会提高性能.

To do this, you need other logic changes in controller, you have to manage when the result of getServiceScheduler(institutionUserConnection)" actually changes yourself but it WILL increase the performance.

改进#2:

使用一次评估的变量，如果行的值一旦呈现就再也不会改变.这将极大地减少观察者，并帮助您提高整体性能:

Use variables that are evaluated once if values of rows never change once they are rendered. This will reduce watchers drastically and help you improve overall performance:

```html
<tr ng-repeat="institutionUserConnection in someScopeVariable">
  <td>{{ ::institutionUserConnection.user.firstname }} {{ ::institutionUserConnection.user.lastname }}</td>
</tr>```

改进#3:

在ng-repeat 中使用track by语句. Angular.js通常使用ng-repeat中的特殊哈希函数$id检查/重试以标识哪个对象是哪个对象.但是，您自然会为数组中的每个对象都有一个标识符(并且应该)，您可以使ng-repeat使用它而不是创建它自己的ID.例如:

Use track by statement in ng-repeat. Angular.js normally checks/tries to identify which object is which using a special hash function $id in ng-repeat. However, you naturally have an identifier for each object in array (and you should) you can make ng-repeat use this instead of creating it's own id. For example:

<tr ng-repeat="x in someScopeVariable track by x.id">

改进#4 :(在这里找到黑客)

无论做什么，由于阵列很大，因此您可能无法充分提高性能.然后您应该问这个问题，人们真的能一次看到600项吗?不，它不适合页面.因此，您可以切碎不适合页面的部分，从而减少DOM元素的渲染时间.为此，您可以使用limitTo过滤器:

Whatever you do, since your array is large, you may not be able to increase the performance enough. Then you should ask this question, do people really see 600 items in one look? No, it won't fit to page. So, you can chop the part that doesn't fit the page, reducing DOM elements to be rendered at once. To do that you can use limitTo filter:

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

您可以在开头将visual.limitValue进行合理的计数，例如10，并且可以在表的scroll上增加它，以在使用量即将到达底部时增加它，从而导致DOM部分追加到页面.但是，此hack需要在页面中同时更改样式和代码.

You can make visual.limitValue a reasonable count such as 10 in the beginning and you can increase it on table's scroll to increase it when use is about to reach the bottom, resulting partial appending of DOM to page. However this hack requires both style and code changes in the page.

改进5 :(最hack的，但是有效)

如果每行的尺寸是恒定的，则使用滚动位置和行的尺寸，可以计算哪些行应可见，并且只能渲染它们.我已经写了一个练习指令，将其命名为uber-repeat，并进行了60.000行测试，即使在移动电话中，性能也很棒！

If dimensions of each row is constant, using scroll position and dimension of rows, you can calculate which rows should be visible and you can render them only. I've written a directive for practice, named it uber-repeat and tested it with 60.000 rows and performance was amazing, even in mobile phones!

我认为这里有一个项目使用某种相同的方法: angular-vs-repeat

I think there is a project uses somewhat same approach here: angular-vs-repeat

这篇关于AngularJS ng-repeat性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！