組み込みアプリパフォーマンス格闘記 検索画面編

Transcript

1. © DMM © DMM CONFIDENTIAL 組み込みアプリ　 パフォーマンス格闘記 検索画面編
2. © DMM 自己紹介 2 Walk プレミアムプロダクト開発部　 Webアプリケーション開発グループ　 入社：2024年新卒入社 仕事：DMMTVゲーム機・テレビ機 　　　フロントエンドを開発 趣味：競馬 　　　ハンドドリップコーヒー 　　　一人旅
3. © DMM DMMTVについて 3
4. © DMM 今日話すこと 4 DMMTVの 検 索 画 面 のパフォーマンス 改 善 1. 現状の課題点 2. ボトルネックの洗い出し 3. 改善手法 4. 学びの共有
5. © DMM 今日話すこと 5 1. 現状の課題点 2. ボトルネックの洗い出し 3. 改善手法 4. 学びの共有
6. © DMM 現状の課題点 6 導入 ゲーム機・テレビ機の組み込みアプリ使っていてストレスを感じるこ とはありますか？ なんで重いの？ GPU処理はできるけどCPU処理が苦手だから
7. © DMM 現状の課題点 7 PC 実機
8. © DMM 現状の課題点 8 PCと実機の比較からわかること 1. ボタン押下後のデータ取得 2. 表示のパフォーマンス この2つがPCに比べて実機の方が重い
9. © DMM 今日話すこと 9 1. 現状の課題点 2. ボトルネックの洗い出し 3. 改善手法 4. 学びの共有
10. © DMM ボトルネックの洗い出し 10 組み込みアプリでのパフォーマンスチューニングとは 1. 実機の方での重い箇所の洗い出し 2. 開発環境での数値測定
11. © DMM ボトルネックの洗い出し 11 Webアプリと実機でのパフォーマンスチューニングの違いは？ 1. CSSやDOM操作に関して注意深くみてやること
12. © DMM ボトルネックの洗い出し 12 具体的に洗い出した点 1. ネットワーク関連 2. CSS関連 3. 再レンダリング関連
13. © DMM ボトルネックの洗い出し 13 ネットワーク 確認した点 • データをオーバーフェッチして いていないのか？ ↓ 初回表示だけなら画像データ だけで十分なのでは？
14. © DMM ボトルネックの洗い出し 14 CSS関連 確認した点 • CSS処理をGPUに任せられる ところはないのか？ ↓ ちゃんとハードウェアアクセラ レーションされててえらい！！
15. © DMM ボトルネックの洗い出し 15 再レンダリング関連 確認した点 • Dev Toolsを使って不必要な レンダリングがされていない か？ ↓ キーボード入力でキーボード が全て再レンダリングされてい る！！
16. © DMM ボトルネックの洗い出し 16 再レンダリング関連 実測 キーボード検索 ↓ 検索結果表示この処理の流れ の約20%程度を再レンダリング が占めている
17. © DMM 今日話すこと 17 1. 現状の課題点 2. ボトルネックの洗い出し 3. 改善手法 4. 学びの共有
18. © DMM 改善手法 18 失敗した改善 →　ネットワーク 成功した改善 →　キーボードレンダリングのmemo化
19. © DMM 改善手法 19 ネットワーク • nodeが深くならないように画 像データだけ取得 • 取得時間に変化がみられな かった
20. © DMM 改善手法 20 再レンダリングされる時の条件 1. useStateが更新された時 2. propsが更新された時 3. 親コンポーネントが再レンダリングされた時 再レンダリング関連
21. © DMM 改善手法 21 ゴール 再レンダリングの条件を満たさず (propsを全てイミュータブルな値) して、KeyboardコンポーネントをMemo 化してやる 再レンダリング関連
22. © DMM 改善手法 22 再レンダリング関連 現状確認 • 無名関数を使っている • useStateをpropsで渡している • KeyboardもMemo化されていな い
23. © DMM 改善手法 23 再レンダリング関連 無名関数 無名関数は結果の値が変わらな くても再計算されてしまう ↓ useCallbackでMemo化してやろ う
24. © DMM 改善手法 24 useState 現状絶対更新される値で無理だ.... ↓ useStateのsetter関数って イミュータブルなんですよ コンポーネントのpropsに setter関数を渡してあげます 再レンダリング関連 Keyboard内の処理
25. © DMM 改善手法 25 最終確認 propsがミュータブルな値だった ↓ propsが全てイミュータブルな値に 変更できた 再レンダリング関連
26. © DMM 改善手法 26 結果 Keyboardコンポーネントをメモ化する ↓ 再レンダリング消すことで約20%の 削減に成功 再レンダリング関連
27. © DMM 今日話すこと 27 1. 現状の課題点 2. ボトルネックの洗い出し 3. 改善手法 4. 学びの共有
28. © DMM 学びと共有 28 1. あらかじめ再レンダリングされないようなコンポーネ ント設計を心がけよう 2. パフォーマンスチューニング自体とても泥臭い作業、 銀の弾丸はほぼ見つからないから地道にみてやろう
29. © DMM ご清聴ありがとうございました