DocumentFragment

HTML JavaScript

要素をループでappendChildするよりも、DocumentFragmentとかを使った方が速いよーとCodeIQのフィードバックでもらったのですが、DocumentFragmentってなんぞやという状態だったので調べつつ試しに書いてみました。

index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>DocumentFragment</title>
<ul id="list"></ul>
<script src="index.js"></script>
index.js
document.addEventListener('DOMContentLoaded', function() {
  var fragment = document.createDocumentFragment(),
      i, len, li;

  for (i = 0, len = 10; i < len; ++i) {
    li = document.createElement('li');
    li.appendChild(document.createTextNode(i));
    fragment.appendChild(li);
  }

  document.getElementById('list').appendChild(fragment);
}, false);

という風な感じでスクリプトを書いてあげて実行すると、

  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

という風にレンダリングされます。


とまあ、この程度ならループ内でul要素に対して直接li要素をappendChildしても対して速度的には変わらないのでしょうけど、もっと要素数が多くなったり、ブラウザが古かったり、マシンスペックも低かったりするとだいぶ速度が変わってくるようです。DocumentFragmentを挟むだけで、無駄なスタイルの計算をする必要がなくなるために速くなるなんて、お役立ち情報だなあと思ったのでした。