javascriptで大量要素をDOMツリーに追加するときはDocumentFragmentを使おう - Qiita

前置き レガシーなシステムを保守、パフォーマンス改善をするときにとんでもない実装がされていることってありますよね(悲) 今回は私が遭遇したとんでも実装を改善し、1/20程度の実行時間に改善できた話を紹介します。 実装内容 (実際の処理内容とは多少異なりますが、)APIで取得したデータ(リスト)を繰り返し処理し、テーブルに表示する実装を行います。 もとの実装 もとの実装ではhtml側でテンプレートを作っておき、それをループ処理でクローンし、正規表現で文字列を置換しながらひたすらDOMツリーに追加する方法で実装していました。 (実際に実装されていたものではもっと要素も多く、複雑な処理をしていたため、1万件表示しきれるまでに30～40秒程度かかっていました。上記JSFiddleで私の環境では10～12秒程度かかっています。) 改善後の実装 改善後の実装では、createDocumentFragm