Javascript / dom - wie teuer schafft dom Knoten vs neu anordnen?

Question

Ich versuche, eine sortierbare Tabelle zu optimieren ich geschrieben habe. Der Engpass ist in der DOM-Manipulation. Ich bin derzeit neue Tabellenzeilen zu schaffen und sie jedes Mal Einfügen ich die Tabelle sortieren. Ich frage mich, wenn ich die Dinge könnte in der Lage sein, zu beschleunigen, indem einfach die Zeilen neu anordnen, nicht die Knoten neu zu erstellen. Dazu einen signifikanten Unterschied, dom Knoten Neuanordnung machen würde viel flotter als Knoten schaffen sein. Ist dies der Fall? Vielen Dank, -Morgan

Answer 1

Ich weiß nicht, ob die Schaffung oder Manipulieren schneller ist, aber ich weiß, dass es schneller sein werden, wenn Sie die gesamte Tabelle manipulieren, wenn es nicht auf der Seite ist und es dann auf einmal auf alle platzieren. In diese Richtung wird, ist es wahrscheinlich langsamer sein, die bestehenden Reihen an Ort und Stelle neu zu ordnen, es sei denn, die gesamte Tabelle aus dem DOM entfernt wird zuerst.

Diese Seite schlägt dass es am schnellsten die aktuelle Tabelle würde zu klonen, manipulieren, wie Sie es wünschen, dann die Tabelle auf dem DOM ersetzen.

Answer 2

Ich zeichne diese Tabelle etwa doppelt so schnell jetzt, mit innerHTML-, den gesamten Inhalt als String bauen, anstatt das Einfügen Knoten one-by-Modus.

Answer 3

Sie können diese Seite praktisch finden für einige Benchmarks:

http://www.quirksmode.org/dom/innerhtml.html

Answer 4

, wenn Sie können, ist es besser, die DOM-Manipulation nicht als tatsächliche DOM-Manipulation zu tun, sondern als eine Art von Verfahren in Ihrem Skript und dann das dom zu manipulieren. Also anstatt zu tun, was ein Neuzeichnen auf jedem einzelnen Knoten genannt wird, verklumpen Sie, was Ihre repaint auf jedem einzelnen Knoten in seine eigenen Methode gewesen wäre, und dann bringen Sie diese Knoten in einen Elternteil, das dann auf den tatsächlichen dom angebracht werden würde, was in nur zwei repaints statt Hunderte. Ich sage zwei b / c Sie zu bereinigen müssen, was in dem dom ist bereits bevor Sie mit Ihren neuen Daten zu aktualisieren.

Answer 5

Ich war auf der Suche nach einer Antwort auf diese und beschlossen, eine schnelle Benchmark http: // jsfiddle .net / wheresrhys / 2g6Dn / 6 /

Es nutzt jQuery, so ist keine reine Benchmark, und es ist wahrscheinlich schief auch auf andere Weise. Aber das Ergebnis es gibt, ist, dass die Knoten DOM bewegt, ist etwa doppelt so schnell wie das Erstellen und detroying dom Knoten jedes Mal