わいの日記

ありがちエンジニアブログ

JavaScript DOMをたくさん追加する際にはcreateDocumentFragmentを使う

JSのtips

JavaScriptでcreateElementしてそれをレンダリングすることって結構あると思います
1つのDOMを追加するならともかく、複数のDOMをそれぞれ追加するのは、
毎回DOMツリーにアクセスすることになったり、
DOMの位置計算など起こるので、
パフォーマンスを 考慮すると避けたい所です

そこでDOMをたくさん追加する際にはcreateDocumentFragmentを使うといい感じです

developer.mozilla.org

めっちゃざっくり言うと、
DOMの塊を作成して、それをまとめてDOMツリーに追加するって感じですね


簡単な使用例を用意しておきました
jsfiddle.net

何かの参考になれば幸いです