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

前置き

レガシーなシステムを保守、パフォーマンス改善をするときにとんでもない実装がされていることってありますよね(悲)

今回は私が遭遇したとんでも実装を改善し、1/20程度の実行時間に改善できた話を紹介します。

実装内容

(実際の処理内容とは多少異なりますが、)APIで取得したデータ(リスト)を繰り返し処理し、テーブルに表示する実装を行います。

もとの実装

もとの実装ではhtml側でテンプレートを作っておき、それをループ処理でクローンし、正規表現で文字列を置換しながらひたすらDOMツリーに追加する方法で実装していました。
(実際に実装されていたものではもっと要素も多く、複雑な処理をしていたため、1万件表示しきれるまでに30～40秒程度かかっていました。上記JSFiddleで私の環境では10～12秒程度かかっています。)

改善後の実装

改善後の実装では、createDocumentFragment()で仮想的なDOMを作り、その仮想DOMに対して子を追加していき、ループ処理後にまとめて追加します。
(実際に実装されていたものを改善したものでは2～3秒、JSFiddle内では0.1～0.3秒程度に改善されました。)

備考

• 実際に実装されていたものと合わせてもとの処理で正規表現の文字列置換を行っていたため、そこが無くなったのも処理速度改善に繋がったのでは？と思い追加検証を行った結果以下の通りとなりました。
  • クローンで追加 ： 4～5秒
  • DocumentFragmentを使う ： 0.1秒程度
• もとの処理ではhtml側でonClickを設定し、その引数に_IDを設定し、そこも置換して引数としたかったようです。
  • (動きはするけどなんかもどかしい・・・ｗ)

参考

終わりに

このレガシーなシステムにはもとの処理と同じ方法でテーブルやリストを作る処理での実装がいくつも実装されていました。
おそらく最初に作った人がこの処理で実装し、その処理を真似ながら作ったことでどんどん遅い処理が増えて行くことになったのだと思います。

初期の実装段階から件数が多くてもまともに動くことを検証しながら実装していくことが大事なんだとおもいました。

もとの処理での実装で複数のテーブルを作り込む処理を実装しているページがあり、最初のローディングが終わるのに1,2分かかるといったこともあり、かなりのパフォーマンス改善になったので、今後も検証・改修を続けて行こうと思います。