やあ、こんにちは。Webの迷宮へようこそ。
フロントエンドという仕事をしていると、時々「なぜかサイトが重い」「スクロールがカクつく」といった壁にぶつかることがあるよね。
そんな時、多くの初心者が陥る罠がある。それは「DOMを闇雲に操作しすぎて、ブラウザを疲れさせてしまうこと」なんだ。
今日は、そんなブラウザを労わりつつ、爆速で描画を行う魔法の道具「DocumentFragment」について、少しだけ深く、でも優しくお話ししよう。
—
DOM操作は「お買い物」に似ている
まず、ブラウザが画面を描画する仕組みを想像してみてほしい。DOM（HTMLの要素）を一つ追加するたびに、ブラウザは「おっと、レイアウトが変わったぞ！全部計算し直さなきゃ（リフロー）」とか「色が変わったから塗り直しだ！（リペイント）」といって、大忙しで作業を始めるんだ。
これを「お買い物」に例えてみよう。
あなたがスーパーで10個の食材を買うとする。
- 効率の悪い方法： 1個買うごとにレジに行き、会計をして、一度店を出て、また店に入る…これを10回繰り返す。
- 効率の良い方法： 10個の食材を「カゴ」にまとめて、最後にレジへ行き、一回の会計で済ませる。
DOM操作でいう「カゴ」の役割を果たしてくれるのが、今回紹介するDocumentFragmentなんだ。
DocumentFragmentという「魔法のカゴ」
DocumentFragmentは、いわば「メモリ上にだけ存在する、透明な箱」だ。
この箱の中にいくら要素を詰め込んでも、ブラウザの画面には何も表示されないし、計算も発生しない。
あなたがJavaScriptでせっせと要素を作って、この「箱」に詰め込んでいく。最後に、その箱をドカッとメインの画面（DOMツリー）に差し込む。すると、ブラウザは「お、一気に来たな。じゃあ一度だけ計算するか！」といって、驚くほどスムーズに処理を終えてくれるんだ。
さあ、コードを見てみよう
まずは「やってはいけない」書き方と、DocumentFragmentを使った「賢い」書き方を比較してみよう。
1. 悪い例：何度もDOMを直接書き換える
const list = document.getElementById(‘list’);
// 100個の要素を直接追加する（ブラウザは100回計算し直すので大忙し！）
for (let i = 0; i < 100; i++) {
const li = document.createElement('li');
li.textContent = `アイテム ${i}`;
list.appendChild(li); // ここで毎回「リフロー」が発生する
}
2. 良い例：DocumentFragmentでバッチ処理する
const list = document.getElementById(‘list’);
// 魔法のカゴ（DocumentFragment）を召喚！
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) { const li = document.createElement('li'); li.textContent = `アイテム ${i}`; // まだ画面には反映されません。メモリ上の箱に入れるだけ！ fragment.appendChild(li); } // 最後に一回だけ、画面に追加する。これなら計算は一回で済みます！ list.appendChild(fragment); どうだろう？やってることは同じ100個の追加だけど、ブラウザの負担は段違いだよね。
なぜこれが「伝説級」の技術なのか
フロントエンドの現場では、数千件のデータリストを扱うことも珍しくない。もしその時に「悪い例」のような書き方をしていたら、ページを開いた瞬間にブラウザがフリーズしてしまうだろうね。
DocumentFragmentを使うことは、単なる最適化じゃない。「ブラウザという優秀なエンジンを、いかに気持ちよく走らせてあげるか」という、エンジニアとしての配慮なんだ。
覚えておいてほしいこと
- DOM操作は「重い」： なるべく減らすのが鉄則。
- DocumentFragmentは「透明な仮置き場」： 何度いじっても画面は動かないから、安心して構築できる。
- 最後の一撃： `appendChild`で箱ごと入れる瞬間だけが、唯一の描画コスト。
—
もし今、自分の書いたコードが少し重いなと感じたら、この「カゴ」のことを思い出してみてほしい。
大丈夫、最初は誰でもDOMをいじりすぎてしまうものだよ。こうやって一つずつ、ブラウザと仲良くなる術を学んでいけば、君も必ず素晴らしいフロントエンド・アーキテクトになれるはずだ。
また何か壁にぶつかったら、いつでもおいで。一緒に紐解いていこう。
コメント