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
ご清聴ありがとうございました