Javascript (AngularJS) blockiert die Benutzeroberfläche während der großen DOM - Aktualisierung nicht

Question

In meiner eckigen App habe ich eine Operation, die das Potenzial hat, jedes Mal, wenn sie ausgeführt wird, Zehntausende von Elementen zum DOM hinzuzufügen (was jedes Mal passiert Anwender fügt neue Daten in ein Textfeld.

Gelegentlich, wenn es um hinzuzufügen hat, sagen wir, 20.000 Tabellenzeilen in eine Tabelle, es ist nur blockiert die ganze Seite (Spinning Beachball) für etwa 10 Sekunden.

Ist Es gibt einen Weg, um es nicht die UI zu blockieren? (Eine Möglichkeit neben nicht Hinzufügen aller Elemente zum DOM: Da das ist die Kernfunktionalität dieser bestimmten App)

Mein nächster Gedanke war dies: Was passiert, wenn ich die Tabelle verberge, bis alle In-Memory-DOM-Manipulation erfolgt ist, dann zeige es noch einmal?

Weil ich weiß, dass die Aktualisierung des DOM ist eigentlich ein zweistufiger Prozess: 1) aktualisieren Sie alle Elemente im Speicher, dann 2) Rendern Sie den betroffenen Abschnitt der Seite.

Ist es möglich, einen Rückruf nach die DOM-Manipulation im Speicher abgeschlossen zu erhalten?

Irgendwelche anderen Gedanken?

Vielen Dank im Voraus!

EDIT: Hier ist der relevante Code

<table> 
    <tr ng-repeat="row in enormousArray"> 
     <td ng-repeat="value in row">{{value}}</td> 
    <tr> 
<table> 

Und die javscript:

$scope.someEventsHappen = function(dataString){ 
    var my2DArray = MyService.functionThatProcessesAStringIntoAnArray(dataString); 
    $scope.enormousArray = my2DArray; 
} 

HINWEIS: 1) das ist nicht die Namen der tatsächlichen Funktionen und Variablen in meinem Code, so bitte keine Vorträge über Benennungskonventionen, und 2) Ich verwende tatsächlich "Controller als" in meinem Code, aber ich übersetzte es der Einfachheit halber in $ Scope.

EDIT 2: Nachdem ich ein wenig mehr gelesen habe, denke ich, dass ich als nächsten Schritt eine benutzerdefinierte Anweisung erstellen muss, damit ich kontrollieren kann, wann und wie die Daten im Verbindungsschritt gebunden werden. Ich poste meine Ergebnisse hier, wenn ich fertig bin und wenn es nützliche Informationen liefert.

Answer 1

Versuchen Sie, Ihre Zeilen zu einem Objekt anstelle des Doms hinzuzufügen. Wenn die Operation abgeschlossen ist, werden alle Änderungen sofort in dom gelöscht. Wenn Sie jedes Element einzeln zu dom hinzufügen, muss der Browser 20.000 Mal erneut analysieren/neu zeichnen. Sie sollten versuchen, den Tisch aufzubauen, ohne das Dom zu berühren.

Answer 2

Um DOM-Elemente beim Laden auszublenden, können Sie ngCloak verwenden. Was Sie tun, ist jedoch nicht der richtige Weg. Wenn Sie "Zehntausende" Elemente laden, geben Sie Ihrem Benutzer kein Gebet, Ihre Seite auf nützliche Weise zu betrachten. Sie müssen herausfinden, was sie wirklich brauchen, um zu sehen und wie Sie das in einer Weise liefern können, die Sinn macht. Niemand sieht über 20k Datensätze aus irgendeinem Grund auf einer Webseite.