createDocumentFragment()の使い方
createDocumentFragment()をなぜ使うのか
HTMLに対して、要素を追加する場合にはappendChild()などのメソッドを使いますが、それらのメソ度は複数の要素を追加することができません。（追加したい要素の数のメソッドを記述することになります。）
複数の要素を追加したい場合には、DocumentFragmentを作成して、それに対して追加したい複数の要素をまとめておいて、一括でappendChild()する方法がよく使われています。
実はHTMLへ要素を追加する行為はとても重い作業であり、何度も繰り返すことでパフォーマンス面の問題が生じることがあります。DocumentFragmentを使うことで、一回の追加で済むので処理速度が上がるというわけです。
createDocumentFragment()を使わない場合
まずは、createDocumentFragment()を使わない場合のサンプルコードから見ていきましょう。
HTML
<ul id="list"></ul>JavaScript
const array = ['one', 'two', 'three', 'four'];
const ul = document.querySelectorAll('#list');
for(let elem of array) {
const li = document.createElement('li');
li.textContent = elem;
ul.appendChild(li);
}要素追加後のHTML
<ul id="list">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>リストの各要素をループ処理で追加する際に、ulタグに対して各処理ごとにappendChild()で要素を追加しています。
DOMの追加は重い作業であるため、パフォーマンス面を考慮すると望ましくない方法であると言えます。
createDocumentFragment()を使う場合
createDocumentFragment()を使うことで、複数のDOMを一回の処理で追加することができる様になります。
HTML
<ul id="list"></ul>JavaScript
const array = ['one', 'two', 'three', 'four'];
const ul = document.querySelectorAll('#list');
const fragment = document.createDocumentFragment()
for(let elem of array) {
const li = document.createElement('li');
li.textContent = elem;
fragment.appendChild(li);
}要素追加後のHTML
<ul id="list">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>DocumentFragmentはDOMツリーに追加される際、子要素を展開する形で追加されるためDocumentFragment自体が追加されることはありません。
そのため、複数の要素を追加したい場合には、一度DocumentFragmentにまとめておいて、一括で追加するという方法が使えます。
まとめ
createDocumentFragment()を使うことで、JavaScriptで複数の要素を一度に追加できる様になります。
要素の追加が一回で済むことによって、処理速度の面でのパフォーマンスの向上が望めます。
とても便利なので、createDocumentFragment()の使い方をぜひ覚えておきましょう。
コメント