組み込みアプリパフォーマンス格闘記 検索画面編
by
ayumu
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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 ご清聴ありがとうございました