Angular vs-Wiederholung Leistungsproblem mit Tabellen mit 7k Zeilen

Question

Ich benutze eckige vs-Wiederholung, um rund 7k Zeilen in einer Tabelle zu rendern. Wenn ich vs-repeat für den Tabellenkörper verwende, war das Rendering sehr langsam.

<table class="table"> 
    <tbody vs-repeat style="width: 100%;"> 
    <tr ng-repeat="row in list track by $index"> 
     <td>{{::row[listColumns[0].colName]}}</td> 
     <td>{{::row[listColumns[1].colName]}}</td> 
     <td>{{::row[listColumns[2].colName]}}</td> 
     <td>{{::row[listColumns[3].colName]}}</td> 
     <td>{{::row[listColumns[4].colName]}}</td> 
    </tr> 
    </tbody> 

Wenn ich vs-Wiederholung verwenden, ohne Tabellen, die ich in meinem Fall verwendet divs. Das Rendering ist sehr schnell

<div vs-repeat class="table-body"> 
    <div class="row" ng-repeat="row in list track by $index"> 
    <div class="col-md-4">{{::row[listColumns[0].colName]}}</div> 
    <div class="col-md-2">{{::row[listColumns[1].colName]}}</div> 
    <div class="col-md-2">{{::row[listColumns[2].colName]}}</div> 
    <div class="col-md-2">{{::row[listColumns[3].colName]}}</div> 
    <div class="col-md-2">{{::row[listColumns[4].colName]}}</div> 
    </div> 
</div> 

Bitte schlagen Sie vor, wie Sie die Leistung für Tabelle verbessern können?

Answer 1

Mit riesigen Sammlungen, die DOM-Inhalt erreicht hat, kann sogar die kleinste Verarbeitung von Artikeln innerhalb ng-repeat Ihre App ersticken.

DOM related solutions, die überprüfen, ob Elemente in Sicht sind, sagt Ihnen nicht, ob verschachtelte Komponenten vollständig geladen und gerendert wurden und zu Fehlern führen können.

dieses Problem Meine Lösung des Winkels limitTo : limit: begin Filter ist, zusammen mit iScroll oder nativer scrollTop und scrollBottom Rückrufen, die den begin Index in der Steuereinheit gemäß der Browse-Richtung zu erhöhen oder reduzieren - Art Frontend Paginierung, wo nur eine bestimmte Anzahl von Elemente werden im DOM angezeigt.

<tr ng-repeat="item in items | limitTo : 100 : 600 track by $index"> 
    <span>{{ item.property }}</span> 
</tr> 

Dann können Sie die optimale limitTo Zahl finden, die für die App am besten aus - während es Licht zu halten, schnell und agil wie Angular sein sollte.

Answer 2

Verwenden Sie ng-Repeat auf einem kleinen Satz eines Arrays. Paginierung oder faules Laden. Speichern Sie die Daten in einem temporären Array, das angezeigt werden soll. Sie sollten n-repeat auf 7k-Datensätzen haben. Gedanken? Danke!