Tiefes Klonen vs setzen von innerHTML: was ist schneller?
Ich versuche, herauszufinden, die meiste leistungsfähige Weise, von tief-Klonen ein DOM-Baum im browser.
Wenn ich beginnen mit
var div = document.getElementById("source");
var markup = div.innerHTML;
Was wird schneller sein,
var target = div.cloneNode(true);
oder
var target = document.cloneNode(false);
target.innerHTML = markup;
Verstehe ich die browser-Plattform können einen großen Unterschied machen hier, also keine Informationen darüber, wie diese zu vergleichen, in der realen Welt würde geschätzt.
- Ich verstehe nicht, was Sie suchen. Sie möchten, um ein element zu Klonen?
var target = div.cloneNode(true);
genau das Tat. Was bedeutet Klonen zu tun haben, mitinnerHTML
? - Die konkreten Ergebnisse hängen von Ihrem browser, aber ich fand zwei relevanten tests bei jsPerf hier und hier.
- innerHTML zerstört-Ereignis-Listener, verwenden Sie es nicht.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Let ' s test!
Habe ich folgenden code Hinzugefügt, um eine Kopie der StackOverflow-Fragen-Seite (entfernen Sie vorhandene Skripts erste, und läuft von Grund auf mit einer der timeit()s auskommentiert jedes mal um, drei Läufe von 100 ops:
Hier sind die Ergebnisse laufen auf eine VirtualBox auf einem Core 2 Q9300:
So cloneNode(true) ist viel schneller als das kopieren von innerHTML. Natürlich war es immer; serialising ein DOM text und dann re-Analyse es von HTML ist harte Arbeit. Der Grund, DOM-Kind-Operationen sind in der Regel langsam ist, dass Sie einfügen/verschieben von Ihnen ein-by-one, all-at-once-DOM-Operationen wie cloneNode nicht zu tun.
Safari schafft die innerHTML-op erstaunlich schnell, aber immer noch nicht annähernd so schnell, wie es tut, cloneNode. Der IE ist, wie erwartet, ein Hund.
So, auto -1s-rundum an alle, die gesagt innerHTML wäre Natürlich Schneller, ohne zu überlegen, was die Frage war eigentlich.
Und ja, die jQuery nutzt innerHTML zu Klonen. Nicht weil es schneller ist, obwohl — Lesen Quelle:
jQuery-Element verwendet.attachEvent() implementieren eigene event-system, so natürlich muss es zu vermeiden, dass Fehler. Wenn Sie nicht benötigen, können Sie vermeiden, den Aufwand.
[Off-topic beiseite: Dann wieder, ich denke holding jQuery als der Höhepunkt der Best-Practice-vielleicht ein bisschen Irre, vor allem angesichts der nächsten Zeile:
Das ist richtig — jQuery fügt seine eigene, beliebige Attribute zu HTML-Elementen, und dann muss Sie loswerden, wenn es Klone (oder die sonst Zugang zu Ihrem markup, wie durch die $().html () - Methode). Das ist hässlich genug, aber dann denkt, dass es der beste Weg, dies zu tun, ist die Verarbeitung von HTML mit regulären Ausdruck, der die Art der grundlegenden Fehler, den Sie erwarten mehr von naiven 1-Ruf der SO Fragende als der Autor des Zweiten Kommens Besten JS-Framework Evar.
Hoffe, du hast nicht die Zeichenfolge "jQuery1="2" und" anywhere in text-Inhalt, 'cos, wenn so dass Sie nur auf mysteriöse Weise verloren. Dank jQuery! So endet der off-topic beiseite.]
removeAttr()
drauf??? Vielleicht ist es ein trade-off, es könnte sein, viel schneller auf Kosten der mangeln von Personen, die die Zeichenfolge. Obwohl es selten ist, es sollte eine gewisse Art der Warnung in der jQuery-Doku (ich habe es nicht gefunden falls es gibt)innerHTML
. Also Einstellungelementnode.jQueryId45438= [1]
(ein Array-Objekt) erlauben würde, jQuery, um seine eindeutige ID für das element, ohne in Unordnung zu den serialisieren und dass keine post-innerHTML
Korrekturen.jQuery.cache
), um die zugehörigen Daten. Die Ereignisbehandlung beruht auf einer Art von zugehörigen Daten, so dass Sie so ziemlich jedes jQuery-Skript ist mit dieser.Hmmm... interessant, ich habe gerade einen test in Firefox 3 und eine Tiefe Klon zu sein scheint, etwa 3 mal schneller, als sich die innerHTML-route.
Ich bin mir sicher, dass innerHTML ist immer noch schneller als die einzelnen DOM-Operationen, aber zumindest für tiefes Klonen, cloneNode(true) scheint besser optimiert.