DocumentFragmentオブジェクト
appendChildはJSから文書ツリーに要素を追加できる非常に便利なメソッドです。しかし、appendChildは場合によってオーバーヘッド（負担）の高い処理にもなってしまいます。
そこで使われるのがDocumentFragmentオブジェクトです。
DocumentFragmentとは、文字通り「文書の断片」であり、「組み立てたノードを一時的にストップするたみに使う入れ物」です。
例を見てみましょう。
See the Pen
abBexpr by Ryuji Watanabe (@ryuji0526)
on CodePen.
上記は、配列の値ををli要素に入れ込んで、ul要素配下に追加する簡単なコードです。
このコードはもちろん正しく動作しますが、パフォーマンス的にはあまり望ましくありません。なぜなら、li要素がul要素に追加するたびにコンテンツが描画されるからです。上記の例では、この５回コンテンツが描画されていることになります。最描画は比較的オーバーヘッドの高い処理になります。
今回のように少ない場合だと負荷を感じることはないと思いますが、配列の要素がどんどん増えると、負担になってしまいます。
このような状況では、DocumentFragmentオブジェクト上でコンテンツを組み立ててからまとめてul要素に追加すべきです。
以下のように修正します。
See the Pen abBexpr by Ryuji Watanabe (@ryuji0526) on CodePen.
このようにDocumentFragmentオブジェクトに貯めることで、文書ツリーの更新は一回だけなので、最描画にかかるオーバーヘッドを最小限に抑えることができます。
おわりに
大規模開発では、このように処理時の負担を意識しなければならないと思います。（私も初心者なので、なかなか意識してコードを組めません、、、）
以下に負担を抑えることができるか、考えてコードを組めるように心がけましょう！（私もがんばります！）