JavaScriptで多くの要素を高速に追加・描画する方法について記載します。
DocumentFragment を使う
要素の追加には、appendChild や insertBefore を使用しますが、次のようにすると
|
1 2 3 4 5 6 7 |
// 親要素の参照を取得 var parent = document.getElementById("parent-elem"); // 親要素に複数の子要素を追加 for( ・・・ ){ parent.appendChild(childElem); } |
子要素を追加する度に、ページの再描画が行われてしまいます。
DocumentFragmentを使用すると、一括に追加・描画することができるので、描画回数が少なくなり、高速に描画することができます。
サンプル
tbody要素に1000行追加します。
html
|
1 2 3 4 5 |
<table> <thead><th>No</th><th>内容</th></thead> <tbody id="table-body"> </tbody> </table> |
javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
// tbodyに追加（forの中では、追加する要素を生成し、DocumentFragmentに追加します） for(i=0; i<1000; i++){ // 子要素trを作成 var newTr = document.createElement("tr"); newTr.setAttribute("id", "tr-" + i); // 子要素td1を作成 var newTd1 = document.createElement("td"); newTd1.setAttribute("id", "td1-" + i); newTd1.appendChild(document.createTextNode(i)); // 子要素td2を作成 var newTd2 = document.createElement("td"); newTd2.setAttribute("id", "td2-" + i); newTd2.appendChild(document.createTextNode("テキスト" + i)); // 子要素tr に td1、td2 を追加 newTr.appendChild(newTd1); newTr.appendChild(newTd2); // ★ポイント★ DocumentFragmentに要素を追加 docFrag.appendChild(newTr); } // 追加先の親要素の参照を取得 var parentDiv = document.getElementById("table-body"); // まとめてツリーに追加する parentDiv.appendChild(docFrag); |
追加する要素を、DocumentFragmentオブジェクトに追加します。
|
1 |
docFrag.appendChild(newTr); |
最後に、まとめてツリーに追加しています。
|
1 |
parentDiv.appendChild(docFrag); |
また、簡単ではありますが比較用に DocmentFragment と appendChild を使用して、テーブルに1000行追加するデモを作成してみました。
ページを表示すると、画面上部に描画時間が表示されます。（残念ながら自分の環境ではそれほど差はありませんでした）
また、DocmentFragmentのメソッドなどは、こちらのサイトを参考にすると分かりやすいと思います。