HTML /パフォーマンス：大量の動的DOM挿入の処理

Question

私は464個のJSONオブジェクトを持っています。これらの要素のそれぞれからHTML要素を生成し、divに順番に挿入する必要があります。これをレンダリングする最速の方法は何でしょうか？オブジェクトを通して

A）ループを、それぞれのマークアップを生成し、それら全てを連結し、連結されたマークアップに容器divのinnerHTML設定：

document.getElementById("container").innerHTML = 
    jsonItems.map(function(item) { 
     return convertToHTMLString(item); 
    }).join(""); 

B）ループオブジェクトを介して、DOMを生成しますそれぞれのノード、及び容器にそれぞれ順次挿入：挿入し、順次、それぞれのDOMノードを生成し、オブジェクトを介し

var container = document.getElementById("container"); 

jsonItems.forEach(function(item) { 
    container.appendChild(convertToDOMNode(item)); 
}); 

C）ループDocumentFragmentにそれらを追加します

var fragment = document.createDocumentFragment(); 

jsonItems.forEach(function(item) { 
    fragment.appendChild(convertToDOMNode(item)); 
}); 

document.getElementById("container").appendChild(fragment); 

Answer 1

Benchmark

正しい答えは、私は個人的に.innerHTMLがそう文書の断片を使用し悪魔だと思うしてくださいベンチマークそれを自分:)

です。

私はドキュメント断片がDOMに直接データを注入するよりも優れていることを知っていると思います。

Answer 2

Bは、最も遅いでしょう。ほぼすべてのjsチュートリアルでこれを行うことをお勧めします。 appendChildは常にDOMの変更が遅いので、2番目の考えではCも遅くなる可能性があります。 Theresはあなた自身がページ上で実行できる古い実験でもあります：http://andrew.hedges.name/experiments/innerhtml/

Answer 3

私はDocumentFragmentを使用します。私は間違いなくオプション2を使用しません。なぜなら、ページごとに挿入されたページを再レンダリングする必要があるからです。この件についてスピードテストをmrでチェックしてみてください。 jQuery自身、j。 resig。彼は、DocumentFragmentを使用することを提案しています。テストでは2〜3倍のパフォーマンスが得られます。

http://ejohn.org/blog/dom-documentfragments/

Answer 4

innerHTMLとDOMのパフォーマンスは、ノードを生成するために使用している手法と比べてあまり重要ではありません。 convertToHTML関数が他のものより速いので、innerHTMLの方が速いと確信しています。 innerHTMLはDOM呼び出しを1つだけ作成し、文字列を解析しDOMノードを作成しDOMに一度に注入するブラウザのマシンコードです。それは、解釈されたコードのjavascriptアプローチよりも速くなるはずです。 innerHTMLが他のすべての変換関数よりも優れているようにConvertToHTMLを作成することができます。

Answer 5

私たちは、以前は同じ問題を抱えていましたが、この規模ではなく、十分な大きさでした。バインディングを使用してサーバーレベルでHTMLを作成することになりました（速いため）。ajax呼び出しの成功コールバックでクライアント側で送信されたHTMLフラグメントを親div要素に一度追加しました。ここで説明した他の方法よりも速く、応答サイズ（トラフィック使用率）はわずか20KBに増加しました。この場合は許容されていました。この助けてほしいと思う:)