Ich beziehe eine Liste mit ungefähr 25.000 Elementen, verwende einen Code wie diesen:
%Vor%Etwas zu meiner Überraschung benutzte ich einen Profiler und fand heraus, dass der Flaschenhals in meinem Code nicht die Schleife war, die tausende Male iterierte, sondern den HTML-Code der Liste auf den String setzte. Dies dauert normalerweise ungefähr 5-10 Sekunden auf meinem Computer, was eine Größenordnung zu langsam ist.
Gibt es eine Möglichkeit, dies zu tun, die wesentlich schneller ist, d. h. mindestens 10 mal schneller?
Wickeln Sie den HTML-Code in ein einzelnes Element. Wenn jQuery Elemente aus einer Zeichenfolge erstellt, fügt es alle Elemente der obersten Ebene hinzu, indem es sie iteriert. Wenn Sie die Listenelemente in ein einzelnes Element umbrechen, sollte es viel schneller gehen, da nur 1 Element der obersten Ebene zum Dom hinzugefügt werden muss.
%Vor%Die Verwendung von DOM-Methoden zum Erstellen sollte schneller funktionieren:
%Vor%bearbeiten : Eigentlich sollte DocumentFragment dies noch schneller machen:
%Vor% Vielleicht möchten Sie auch clear() the <ol> vor dem Hinzufügen der Elemente zu
ein anderer Schnitt Ich habe einen Jsperf-Test unter Ссылка erstellt - Beide Versionen sind langsamer als das Festlegen von innerHTML (da jQuery zum Erstellen der Elemente verwendet wird). Die dom-Maniuplation mit nativen Methoden ist viel schneller als die Einstellung von HTML, ABER der schnellste Weg, mit großem Abstand, ist die Verwendung von DOM-Manipulation mit DocumentFragment ohne jQuery mit nativen Methoden .
Array-Joins sind schneller als die String-Manipulation.
%Vor%Dies wird es um einiges beschleunigen. Die Verkettung von Strings kann lange dauern, wenn sie häufig verwendet werden, weil "unter der Haube" passiert.
%Vor%Eine Sache, die Sie hier beachten sollten, ist, dass es bei einer Iteration von 25.000 schwierig sein wird, die Zeit auf Millisekunden zu reduzieren, wenn Sie eine große Anzahl von Datensätzen einfügen. Dies passiert besonders im IE, da jedes neue Element vor dem Einfügen analysiert wird. Wenn Sie einen "Pager" erstellen und die einzufügenden Objekte zwischenspeichern, wird dies erheblich beschleunigt.
Tags und Links javascript jquery dom