Node.jsを使った開発が最近増えてきて、jQueryで何となくDOMを操作していましたが、そろそろピュアなjavascriptを本格的に覚えていかないとと焦っています。 そこで最近、HTMLのTable要素内を動的にajaxを用いて変移させるという処理を構築するにあたり、クライアントサイドなjavascriptなので、1msでも早く処理をしたく何か方法がないかグーグル先生に聞いてみたところこんなものが見つかりました。

“Document Fragment”

Tableなどを動的に本来動かす際、このような処理をすることが多いと思います。

let table = document.getElementById('main_table');
for( i=0; i<100; i++) {
let tr = document.createElement('tr');
let td =document.createElement('td');
let tr.appendChild(td);
table.appendChild(tr); // ここで毎回DOMにアクセスされる
}

これだと100回することになります。好ましくないですね。 そこでdocumentFragmentを使用してみると以下のようになります。

let table = document.getElementById('main_table');
let fragment = document.createDocumentFragment(); // Fragmentの作成
for( i=0; i<100; i++) {
let tr = document.createElement('tr');
let td =document.createElement('td');
let tr.appendChild(td);
fragment.appendChild(tr); // Fragmentに一時的に追加する　このときDOMへのアクセスは発生しない
}
table.appendChild(fragment); // 最後にDOMにアクセスしTableにFragmentを追加

とやってやれば、100回もアクセスしていたのを1回で抑えることができます。 table.appendChild(fragment); 　このときに一見DOMの木構造が

TABLE
┗ FRAGMENT
　　┗TR

となりそうですが、実際は

TABLE
┗TR

という風にDOMに追加したとき、Fragmentは追加されず、子ノードのみが追加されます。 なので、ul 要素内のliの追加などにも応用できます。

よっぽど大きなデータを動的に動かさない限りそこまで変化が見られないかもしれませんが、覚えておくといいかもです。

以下参考にしましたサイトです。もう少し掘り下げたい方はこちらをどうぞ。

七章第四回 ノードをまとめて扱う：DocumentFragment — JavaScript初級者から中級者になろう — uhyohyo.net

qiita.com