appendChildメソッド実行時にかかる負荷を減らすために - Qiita

DocumentFragmentオブジェクト appendChildはJSから文書ツリーに要素を追加できる非常に便利なメソッドです。しかし、appendChildは場合によってオーバーヘッド（負担）の高い処理にもなってしまいます。 そこで使われるのが__DocumentFragmentオブジェクト__です。 DocumentFragmentとは、文字通り「文書の断片」であり、「組み立てたノードを一時的にストップするたみに使う入れ物」です。 例を見てみましょう。 See the Pen abBexpr by Ryuji Watanabe (@ryuji0526) on CodePen. 上記は、配列の値ををli要素に入れ込んで、ul要素配下に追加する簡単なコードです。 このコードはもちろん正しく動作しますが、パフォーマンス的にはあまり望ましくありません。なぜなら、li要素がul要素に追加する