AngularJS langsam beim Rendern einer großen Zeichenfolge

Question

Für meine Angular 1.5 Datei-Upload-Komponente habe ich eine Vorschau implementiert.

Wenn der Benutzer eine Datei auswählt, sie durch eine FileReader und am Lastende gelesen wird, speichere ich die Inhalte in einer Steuerungsvariablen wie

fileReader.onloadend = function(ev) { 
    $rootScope.$evalAsync(function($scope) { 
     $ctrl.rawFileContent = ev.target.result; 
    }); 
}; 

Die Vorlage an den Benutzer zeigt

<pre ng-show="$ctrl.rawFileContent">{{$ctrl.rawFileContent}}</pre> 

Dies funktionierte ziemlich gut für meinen Test während der Entwicklung.

Das Problem

der realen Welt Benutzer laden wollen> 500kB Dateien und dann dauert es Minuten, bis die Vorlage gerendert wird.

Profiling zeigte, dass einige interne Funktionen in 'content-script.bundle.js' bei weitem die meiste Zeit benötigen.

Update: Und das Schlimmste von allem;) Es muss in IE11 laufen.

Was habe ich versucht, so weit

1. einmal mit {{::$ctrl.rawFileContent}} Bindung, die keine Verbesserung ergab

2. die <PRE> holen und seinen inneren Text über direkte DOM-Manipulation Einstellung, die noch lange dauert und schien ein Bit 'non-eckig' zu mir.

   <pre ng-show="$ctrl.rawFileContentReady" class="previewTarget"></pre>` 
   
   
   $rootScope.$evalAsync(function($scope) { 
       var previewTarget = document.getElementsByClassName("previewTarget")[0]; 
       previewTarget.innerHTML = ev.target.result; 
   }); 
   

Haben Sie irgendwelche Ideen, warum das so lange dauert?

Wie kann ich es beschleunigen?

Oder, als Workaround, kann ich den Fortschritt irgendwie verfolgen, um den Benutzer zu informieren?

Answer 1

This link helps to find how to do progress