javascript - DOM の追加/削除と編集の Javascript ベンチマーク?

Question

重複の可能性:
DOM 関数を介して新しい要素を追加するのと、HTML タグを使用して文字列を追加するのとでは、どちらが優れていますか?

1,000 個<div>の を変更する必要があります - たった 2 つの属性です。全体を削除/追加するか、属性を変更するだけで「安く」なりますか? <div>Javascriptでこれを行う最も安価な方法は何でしょう(リークなしで、できるだけ少ないGCで)。

Answer 1

ターゲットブラウザでテストしますが、属性の変更は通常リフローを必要とせず（明らかに、属性が何であるか、スタイルの適用方法にどのように影響するかなどに応じて）、リンクを変更する必要はありません。 DOMノード、属性の変更がより高速になることを期待する傾向があります。コンテンツを置き換えるには、古いDOMノードを破棄し、新しいノードを作成して、それらをDOMにフックする必要があります...

それを行う方法については、divを識別する方法に少し依存しますが、それでも単純なループになります。たとえば、最新のブラウザでは次のようになります。

var divs = document.querySelectorAll("selector for the divs");
var index;
var div;
for (index = 0; index < divs.length; ++index) {
    div = divs[index];
    div.setAttribute(/*...*/);
    div.setAttribute(/*...*/);
}

setAttribute属性がプロパティとして反映されている場合は、関数呼び出しを回避するために、代わりに反映されたプロパティを使用することをお勧めします。たとえば、div.id = "value";ではなくdiv.setAttribute("id", "value");。しかし、それは時期尚早の最適化だと思います。