In Firefox füge ich Text in ~ 500 Divs mit diesem Code ein:
%Vor%Auf meinem Computer nimmt dies konsistent 9ms , wenn die DIVs leer sind . Derselbe Code nimmt jedoch konsistent 18ms , wenn die DIVs bereits Text enthalten.
Warum ist ein leerer DIV 2x schneller beim Einfügen von Text (muss jQuery zuerst den DIV leeren)? Und gibt es eine Möglichkeit, die Leistung des Ersetzens von Text in einem DIV zu verbessern, das bereits Text enthält?
Hinweis: In IE 7 waren die Geschwindigkeitsunterschiede nicht so dramatisch. Das Einfügen von Text in ein leeres DIV war etwa 1,5 mal schneller.
Wenn der einzufügende Text NICHT maskiert werden muss, sollten Sie Folgendes versuchen:
%Vor% jQuery verarbeitet den Text, wenn Sie die Methode .text() verwenden.
Wir müssen uns dieser Methode bewusst sein entkernt die angegebene Zeichenfolge als notwendig, damit es rendert richtig in HTML. Um es zu tun, ruft es an die DOM-Methode
.createTextNode(), welches Sonderzeichen mit ersetzt ihre HTML-Entity-Äquivalente (wie z & lt; für & lt;).
Bearbeiten
Um die Strafe der Methode .each() zu vermeiden, können Sie Folgendes versuchen:
Wenn Sie dadurch keine Leistungssteigerung erzielen, ist dies definitiv ein Problem mit der Browser-Implementierung. Zumindest würde dies jQuery-Performance-Probleme / Bugs ausschließen.
Ja, der Grund dafür, dass diese Methode langsamer ist, wenn Elemente untergeordnete Elemente enthalten, ist, dass die Methode .text() von jQuery zuerst die Methode .empty() und dann .append(document.createTextNode(text))
Von jQuery.text
%Vor% Der Grund dafür ist, dass die .empty() -Methode die .cleanData() -Methode aufruft, die alle Daten und / oder Ereignisse entfernt, die ihren untergeordneten Knoten zugeordnet sind, und dann eine standardmäßige .removeChild() -Methode für alle untergeordneten Knoten ausführt Knoten, um sie zu entfernen, was der Hauptgrund dafür ist, dass Divs, die bereits Text enthalten, langsamer zu aktualisieren sind.
Die Lösung für Ihr Problem besteht darin, eigene, vanilla, javaScript-Funktionen zum Aktualisieren des Textes Ihrer divs zu schreiben, aber stellen Sie sicher, dass Sie keine Click-Ereignisse oder Daten über jQuery anhängen, da Sie dies auf jeden Fall tun werden habe einige Speicherlecks.
Sie können Leistung durch Wiederverwendung eines vorhandenen Textknotens erzielen.
Ein DIV-Element, das nur Text enthält, ist ein DOM-Element, das einen untergeordneten Knoten enthält, dessen Typ ein Textknoten ist. Der Textinhalt wird in diesem Textknoten und nicht innerhalb des übergeordneten DIV-Elements gespeichert.
Das Hauptproblem bei Methoden wie .text () in JQuery oder .innerHTML () in HTML DOM oder sogar .innerText () und .textContent () besteht darin, dass sie alle ein neues Textknoten (auch wenn einer bereits existiert). Genauer gesagt beginnen alle oben aufgelisteten Methoden damit, alle DOM-Kindknoten zu entfernen, einschließlich eines eventuell bereits vorhandenen Textknotens (dies wird auch von den Implementierungen von innerHTML, innerText und textContent durchgeführt). Dadurch bleibt das Kontextelement (in Ihrem Fall das DIV) leer, ohne dass überhaupt Kinder vorhanden sind. Sie erstellen dann einen neuen untergeordneten Knoten vom Typ Textknoten, weisen ihm den neuen Text zu und hängen ihn an das Kontextelement an. Außerdem versucht innerHTML die Eingabe-HTML-Zeichenfolge zu analysieren und daraus ein DOM-Fragment zu konstruieren.
Die schnellste bekannte Methode zum Ersetzen eines vorhandenen Textknotens ist wie folgt:
%Vor%Diese Methode erstellt keinen neuen untergeordneten Knoten, sondern ersetzt lediglich den Text des vorhandenen Textknotens. Offensichtlich nimmt diese Methode an, dass der Textknoten bereits existiert. Damit dies funktioniert, kann Ihr initiales Dokument mit nicht leerem Text innerhalb der DIVs (und mit Ausnahme aller anderen untergeordneten Elemente) initialisiert werden.
Tags und Links javascript jquery