Hannes Weninger: AngularJS ng-repeat performance

Hallo,

ich nutze in meinem Projekt einige male ng-repeat, obwohl man damit eher sparsam umgehen sollte. Hier ist mein Beispiel (mit wenigen DOM- Elementen: Meine Appl ), in dem ich "containerObjects" in einer Tabelle anzeige.

Das funktioniert soweit sehr gut wenn nicht zu viele "containerObjects" angezeigt werden. Wenn es dann um die 500 schedulerContainers sind, wird die Seite schon etwas träge (diese braucht ca. 3-4 Sekunden, bis sie angezeigt wird), Bei 200 "containerObjects" braucht die Seite ca. 1-1.5 Sekunden.

Meine Frage wäre jetzt, wie ich die Performance verbessern kann: Methodenaufrufe sollte man ja vermeiden in ng-repeat - ich hab z.B. folgenden Methodenaufruf in ng-repeat:

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

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

Wäre dankbar für jeden Hinweise, wie ich die Performance verbessern kann (5s is ja fast schon zu viel) Danke! Hannes

  1. Tach!

    Meine Frage wäre jetzt, wie ich die Performance verbessern kann:

    Ich kann dir da keinen konkreten Tipp geben, weil mir da die Erfahrung fehlt. Wenn mir das Problem unterkäme, würde ich mich auf die Suche nach dem Profiler in den Entwicklertools der Browser begeben. Wobei es gut möglich ist, dass nicht alle Browser einen solchen haben. Zudem sind auch die Javascript-Implementierungen unterschiedlich, so dass je nach Browser andere Flaschenhälse vorhanden sein können. Der Profiler jedenfalls kann dir beim Finden des konkreten Verursachers helfen.

    dedlfix.