Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

© DMM 自己紹介 2 Walk プレミアムプロダクト開発部  Webアプリケーション開発グループ  入社:2024年新卒入社 仕事:DMMTVゲーム機・テレビ機    フロントエンドを開発 趣味:競馬    ハンドドリップコーヒー    一人旅

Slide 3

Slide 3 text

© DMM DMMTVについて 3

Slide 4

Slide 4 text

© DMM 今日話すこと 4 DMMTVの 検 索 画 面 のパフォーマンス 改 善 1. 現状の課題点 2. ボトルネックの洗い出し 3. 改善手法 4. 学びの共有

Slide 5

Slide 5 text

© DMM 今日話すこと 5 1. 現状の課題点 2. ボトルネックの洗い出し 3. 改善手法 4. 学びの共有

Slide 6

Slide 6 text

© DMM 現状の課題点 6 導入 ゲーム機・テレビ機の組み込みアプリ使っていてストレスを感じるこ とはありますか? なんで重いの? GPU処理はできるけどCPU処理が苦手だから

Slide 7

Slide 7 text

© DMM 現状の課題点 7 PC 実機

Slide 8

Slide 8 text

© DMM 現状の課題点 8 PCと実機の比較からわかること 1. ボタン押下後のデータ取得 2. 表示のパフォーマンス この2つがPCに比べて実機の方が重い

Slide 9

Slide 9 text

© DMM 今日話すこと 9 1. 現状の課題点 2. ボトルネックの洗い出し 3. 改善手法 4. 学びの共有

Slide 10

Slide 10 text

© DMM ボトルネックの洗い出し 10 組み込みアプリでのパフォーマンスチューニングとは 1. 実機の方での重い箇所の洗い出し 2. 開発環境での数値測定

Slide 11

Slide 11 text

© DMM ボトルネックの洗い出し 11 Webアプリと実機でのパフォーマンスチューニングの違いは? 1. CSSやDOM操作に関して注意深くみてやること

Slide 12

Slide 12 text

© DMM ボトルネックの洗い出し 12 具体的に洗い出した点 1. ネットワーク関連 2. CSS関連 3. 再レンダリング関連

Slide 13

Slide 13 text

© DMM ボトルネックの洗い出し 13 ネットワーク 確認した点 ● データをオーバーフェッチして いていないのか? ↓ 初回表示だけなら画像データ だけで十分なのでは?

Slide 14

Slide 14 text

© DMM ボトルネックの洗い出し 14 CSS関連 確認した点 ● CSS処理をGPUに任せられる ところはないのか? ↓ ちゃんとハードウェアアクセラ レーションされててえらい!!

Slide 15

Slide 15 text

© DMM ボトルネックの洗い出し 15 再レンダリング関連 確認した点 ● Dev Toolsを使って不必要な レンダリングがされていない か? ↓ キーボード入力でキーボード が全て再レンダリングされてい る!!

Slide 16

Slide 16 text

© DMM ボトルネックの洗い出し 16 再レンダリング関連 実測 キーボード検索 ↓ 検索結果表示この処理の流れ の約20%程度を再レンダリング が占めている

Slide 17

Slide 17 text

© DMM 今日話すこと 17 1. 現状の課題点 2. ボトルネックの洗い出し 3. 改善手法 4. 学びの共有

Slide 18

Slide 18 text

© DMM 改善手法 18 失敗した改善 → ネットワーク 成功した改善 → キーボードレンダリングのmemo化

Slide 19

Slide 19 text

© DMM 改善手法 19 ネットワーク ● nodeが深くならないように画 像データだけ取得 ● 取得時間に変化がみられな かった

Slide 20

Slide 20 text

© DMM 改善手法 20 再レンダリングされる時の条件 1. useStateが更新された時 2. propsが更新された時 3. 親コンポーネントが再レンダリングされた時 再レンダリング関連

Slide 21

Slide 21 text

© DMM 改善手法 21 ゴール 再レンダリングの条件を満たさず (propsを全てイミュータブルな値) して、KeyboardコンポーネントをMemo 化してやる 再レンダリング関連

Slide 22

Slide 22 text

© DMM 改善手法 22 再レンダリング関連 現状確認 ● 無名関数を使っている ● useStateをpropsで渡している ● KeyboardもMemo化されていな い

Slide 23

Slide 23 text

© DMM 改善手法 23 再レンダリング関連 無名関数 無名関数は結果の値が変わらな くても再計算されてしまう ↓ useCallbackでMemo化してやろ う

Slide 24

Slide 24 text

© DMM 改善手法 24 useState 現状絶対更新される値で無理だ.... ↓ useStateのsetter関数って イミュータブルなんですよ コンポーネントのpropsに setter関数を渡してあげます 再レンダリング関連 Keyboard内の処理

Slide 25

Slide 25 text

© DMM 改善手法 25 最終確認 propsがミュータブルな値だった ↓ propsが全てイミュータブルな値に 変更できた 再レンダリング関連

Slide 26

Slide 26 text

© DMM 改善手法 26 結果 Keyboardコンポーネントをメモ化する ↓ 再レンダリング消すことで約20%の 削減に成功 再レンダリング関連

Slide 27

Slide 27 text

© DMM 今日話すこと 27 1. 現状の課題点 2. ボトルネックの洗い出し 3. 改善手法 4. 学びの共有

Slide 28

Slide 28 text

© DMM 学びと共有 28 1. あらかじめ再レンダリングされないようなコンポーネ ント設計を心がけよう 2. パフォーマンスチューニング自体とても泥臭い作業、 銀の弾丸はほぼ見つからないから地道にみてやろう

Slide 29

Slide 29 text

© DMM ご清聴ありがとうございました