Website wird langsam, wenn große Datenmengen geladen werden

Question

Ich habe eine interne Team-Website mit python django und angularJS erstellen. Die Website funktioniert einwandfrei, wenn nur wenig Daten/Inhalte darauf vorhanden sind. Wenn die Website gescrollt wird und mehr Daten geladen werden. Es wird langsam. Das Hauptproblem tritt auf, wenn wir versuchen, modal zu öffnen oder zu versuchen, Text in textarea zu schreiben. Der Text bleibt beim Schreiben und modal sehr langsam geöffnet.

Ich habe verschachtelt verwendet ng-repeat gibt es 5 verschachtelte ng-repeat.

<div ng-repeat="x in xyz"> 
 
    <div ng-repeat="y in xyz"> 
 
    </div> 
 
    <div ng-repeat="img in xyz"> 
 
    </div> 
 
    <div ng-repeat="y in xyz"> 
 
    <div ng-repeat="z in xyz"> 
 
    </div> 
 
    </div> 
 
</div>

Oben ist das Beispiel der Struktur in der Website verwendet wird. Das obige Snippet wiederholt sich ungefähr 100 mal durch die ganze Seite. Diese haben Bilder, Formulare, Text, Eingabe, Benutzerkennzeichnung wie Facebook. ngCacheBuster, ui.bootstrap, ngTagsInput, ui.ention, monospaced.elastic Dies sind die externen Bibliotheken, die in der Website verwendet werden. Die Website wird mit Bootstrap erstellt. Gibt es einen bestimmten Grund, warum die Website schwer wird. jede Größe des Bildes ist durchschnittlich etwa 100kb.

Answer 1

wirklich? Die Seite wird langsam geladen, wenn viele Daten vorhanden sind. : D

sowieso die einfachste Methode schwere Daten-Anwendungen zu beschleunigen-up ist bedingt Last und Teile davon zu machen, zum Beispiel:

<div ng-repeat="x in bla" ng-click="showL1 = true"> 
    <div ng-repeat="y in boo" ng-if="showL1 === true"> 
     //more... 
    </div> 
</div> 

auf dem anderen Teil Ihre Architektur ist doppelt überprüfen, da es ist eine sehr begrenzte Menge an Daten, die eine Person von einer Seite nehmen kann und daher über Tabs und Paging

denken

Answer 2

Vielleicht brauchen Sie eine Funktion in Ihrem Controller, die einen Teil aller Daten für den Benutzer laden wird. Zum Beispiel:

app.constant('range' , 10); 

app.controller('example', ['$scope', function($scope) { 
    $scope.loadRangeData = function(range) { 
    //your way of loading data with using range 
    } 
} 

]); 

und nach u ng-Wiederholung als

<div ng-repeat="x in loadRangeData"> 

aber bester Weg, es zu finden Antwort in Ihrem django vielleicht