フロントエンドのパフォーマンスチューニング

フロントエンドのパフォーマンスチューニングについて、開発中に発生した処理遅延の対応の流れを説明します。
1. 問題発生 ： パフォーマンス劣化の実態
2. 原因調査 ： V8エンジンのGC問題を特定
3. 解決策 ： データセット再構築による最適化
4. 結果 ： パフォーマンス改善効果
5. まとめ ： 実践的な学び

Transcript

1. フロントエンドのパフォーマンスチューニング 2025.07.12 hokkaido.js vol.02@Kitami x odewc 三浦 恒樹 (MIURA KOUKI) 診療情報管理士 上級医療情報技師 医用画像情報専門技師 ドゥウェル株式会社
2. 長男が飼っている モンちゃん（ハリネズミ） がアイコン Self Introduction ・ドゥウェル株式会社 （医療系IT開発・導入会社）に所属 ・マネージャー（プレイング・マネージャー） ・TypeScript, Vue.js, Node.js, Java，C#, PHP ・３児の父 ・休日は子どものサッカー観戦 ・参加している勉強会 　札幌PHP勉強会、JBUG札幌、JavaDO、ゆるWeb勉強会、えびてく、 　クラメソ札幌IT勉強会(仮)、AWS初心者LT会in札幌、 　札幌すごいAI会、札幌IT石狩鍋、hokkaido.js　　等
3. 1. 問題発生 ： パフォーマンス劣化の実態 2. 原因調査 ： V8エンジンのGC問題を特定 3. 解決策 ： データセット再構築による最適化 4. 結果 ： パフォーマンス改善効果 5. まとめ ： 実践的な学び INDEX
4. １．問題発生 ： パフォーマンス劣化の実態 フロントエンド Vue.js+Vuetify (VDataTableVirtual) バックエンド Node.js+Fastify+Pg PostgreSQL データベースから4,500件のレコードを取得して、仮 想スクロールのテーブルコンポーネントに表示する テーブル表示まで 3.5 秒
5. テーブル表示まで 3.5 秒 １．問題発生 ： パフォーマンス劣化の実態 フロントエンド Vue.js+Vuetify (VDataTableVirtual) バックエンド Node.js+Fastify+Pg PostgreSQL データベースから4,500件のレコードを取得して、仮 想スクロールのテーブルコンポーネントに表示する 遅いのはココ！ ココを調べてください。 by 三浦（SE歴22年）
6. １．問題発生 ： パフォーマンス劣化の実態 フロントエンド Vue.js+Vuetify (VDataTableVirtual) バックエンド Node.js+Fastify+Pg PostgreSQL データベースから4,500件のレコードを取得して、仮 想スクロールのテーブルコンポーネントに表示する 遅いのはココでした！ by Tさん（SE歴1年） テーブル表示まで 3.5 秒
7. ２．原因調査 ： V8エンジンのGC問題を特定 ブラウザ開発者ツール Performanceタブ "format"関数、めっちゃ 時間掛かってる～ 2,200 ms
8. ２．原因調査 ： V8エンジンのGC問題を特定 ブラウザ開発者ツール Performanceタブ "GC"ってサーバーで 出るヤツじゃん！ つまり"format"関数の実装がGCを頻発するコードになってるんです 💢 by Tさん（SE歴1年）
9. ３．解決策 ： データセット再構築による最適化 対象のプロパティ値を変換して、 元のプロパティにセットする ×4,500回 →参照が無くなった変数領域が 一定数に達してGC発生。を何度も繰り返す。 "format"関数のコード（改善前） メモリ使用を最小限にする美しいコード。のはずでした...
10. ３．解決策 ： データセット再構築による最適化 対象のプロパティ値を変換して、 新しいデータセットに追加する ×4,500回 新しいデータセットができたら丸ごと入れ替え →メモリを2倍使用するが、GC発生しない "format"関数のコード（改善後） 処理の途中でGCを発生させないコードに修正
11. ４．結果 ： パフォーマンス改善効果 50 ms 問題の処理時間 2,200 ms → 50 ms (44倍) 画面表示まで　 3.5 秒　 → 1.5 秒
12. ５．まとめ ： 実践的な学び 1. 問題発生 ： パフォーマンス劣化の実態 → フロントエンドでもパフォーマンス劣化は発生する。 2. 原因調査 ： V8エンジンのGC問題を特定 → フロントエンドのパフォーマンスチューニングでは 開発者ツールのPerformanceタブが有用。 3. 解決策 ： データセット再構築による最適化 → 美しいコードが「正義」とは限らない。 時にはランタイムに最適なコードを意識する。 4. 結果 ： パフォーマンス改善効果 → コードの書き方だけで 44 倍高速化(または劣化)する。
13. ご清聴ありがとうございました。 最後に ： おすすめの書籍 うまくいっている人は忙しいので移動する → 移動する人だから「うまくいく」 ・人は意志が弱い、意志→改善はできない 　だから、行動(環境)を変える→意志が変わる→改善する ・移動・普段と違う＝刺激・脳の活性化 　コンフォート・ゾーンから抜け出す ・新しい知識・体験→面白い人生→自分も面白い人間 　→移動する→新しい人に出会う→新しい知識・体験...