Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
組み込みアプリパフォーマンス格闘記 検索画面編
Search
ayumu
December 18, 2024
Technology
1
440
組み込みアプリパフォーマンス格闘記 検索画面編
ayumu
December 18, 2024
Tweet
Share
Other Decks in Technology
See All in Technology
ChatGPTを使ったブログ執筆と校正の実践テクニック/登壇資料(井田 献一朗)
hacobu
1
160
横断SREの立ち上げと、AWSセキュリティへの取り組みの軌跡
rvirus0817
3
4.5k
20250125_Agent for Amazon Bedrock試してみた
riz3f7
2
110
アクセシブルなマークアップの上に成り立つユーザーファーストなドロップダウンメニューの実装 / 20250127_cloudsign_User1st_FE
bengo4com
2
1.2k
Platform EngineeringがあればSREはいらない!? 新時代のSREに求められる役割とは
mshibuya
2
4k
RevOpsへ至る道 データ活用による事業革新への挑戦 / path-to-revops
pei0804
3
800
【Λ(らむだ)】アップデート機能振り返りΛ編 / PADjp20250127
lambda
0
120
プロダクト開発、インフラ、コーポレート、そしてAIとの共通言語としての Terraform / Terraform as a Common Language for Product Development, Infrastructure, Corporate Engineering, and AI
yuyatakeyama
6
1.6k
プロダクト観点で考えるデータ基盤の育成戦略 / Growth Strategy of Data Analytics Platforms from a Product Perspective
yamamotoyuta
0
120
[2024年10月版] Notebook 2.0のご紹介 / Notebook2.0
databricksjapan
0
1.6k
アーキテクチャわからん、の話
shirayanagiryuji
0
150
ブロックチェーンR&D企業における SREの実態 / SRE Kaigi 2025
datachain
0
3.9k
Featured
See All Featured
Building an army of robots
kneath
302
45k
Unsuck your backbone
ammeep
669
57k
The Cult of Friendly URLs
andyhume
78
6.2k
Six Lessons from altMBA
skipperchong
27
3.6k
Done Done
chrislema
182
16k
Navigating Team Friction
lara
183
15k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
BBQ
matthewcrist
85
9.4k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Become a Pro
speakerdeck
PRO
26
5.1k
Transcript
© DMM © DMM CONFIDENTIAL 組み込みアプリ パフォーマンス格闘記 検索画面編
© DMM 自己紹介 2 Walk プレミアムプロダクト開発部 Webアプリケーション開発グループ 入社:2024年新卒入社 仕事:DMMTVゲーム機・テレビ機 フロントエンドを開発
趣味:競馬 ハンドドリップコーヒー 一人旅
© DMM DMMTVについて 3
© DMM 今日話すこと 4 DMMTVの 検 索 画 面 のパフォーマンス
改 善 1. 現状の課題点 2. ボトルネックの洗い出し 3. 改善手法 4. 学びの共有
© DMM 今日話すこと 5 1. 現状の課題点 2. ボトルネックの洗い出し 3. 改善手法
4. 学びの共有
© DMM 現状の課題点 6 導入 ゲーム機・テレビ機の組み込みアプリ使っていてストレスを感じるこ とはありますか? なんで重いの? GPU処理はできるけどCPU処理が苦手だから
© DMM 現状の課題点 7 PC 実機
© DMM 現状の課題点 8 PCと実機の比較からわかること 1. ボタン押下後のデータ取得 2. 表示のパフォーマンス この2つがPCに比べて実機の方が重い
© DMM 今日話すこと 9 1. 現状の課題点 2. ボトルネックの洗い出し 3. 改善手法
4. 学びの共有
© DMM ボトルネックの洗い出し 10 組み込みアプリでのパフォーマンスチューニングとは 1. 実機の方での重い箇所の洗い出し 2. 開発環境での数値測定
© DMM ボトルネックの洗い出し 11 Webアプリと実機でのパフォーマンスチューニングの違いは? 1. CSSやDOM操作に関して注意深くみてやること
© DMM ボトルネックの洗い出し 12 具体的に洗い出した点 1. ネットワーク関連 2. CSS関連 3.
再レンダリング関連
© DMM ボトルネックの洗い出し 13 ネットワーク 確認した点 • データをオーバーフェッチして いていないのか? ↓
初回表示だけなら画像データ だけで十分なのでは?
© DMM ボトルネックの洗い出し 14 CSS関連 確認した点 • CSS処理をGPUに任せられる ところはないのか? ↓
ちゃんとハードウェアアクセラ レーションされててえらい!!
© DMM ボトルネックの洗い出し 15 再レンダリング関連 確認した点 • Dev Toolsを使って不必要な レンダリングがされていない
か? ↓ キーボード入力でキーボード が全て再レンダリングされてい る!!
© DMM ボトルネックの洗い出し 16 再レンダリング関連 実測 キーボード検索 ↓ 検索結果表示この処理の流れ の約20%程度を再レンダリング
が占めている
© DMM 今日話すこと 17 1. 現状の課題点 2. ボトルネックの洗い出し 3. 改善手法
4. 学びの共有
© DMM 改善手法 18 失敗した改善 → ネットワーク 成功した改善 → キーボードレンダリングのmemo化
© DMM 改善手法 19 ネットワーク • nodeが深くならないように画 像データだけ取得 • 取得時間に変化がみられな
かった
© DMM 改善手法 20 再レンダリングされる時の条件 1. useStateが更新された時 2. propsが更新された時 3.
親コンポーネントが再レンダリングされた時 再レンダリング関連
© DMM 改善手法 21 ゴール 再レンダリングの条件を満たさず (propsを全てイミュータブルな値) して、KeyboardコンポーネントをMemo 化してやる 再レンダリング関連
© DMM 改善手法 22 再レンダリング関連 現状確認 • 無名関数を使っている • useStateをpropsで渡している
• KeyboardもMemo化されていな い
© DMM 改善手法 23 再レンダリング関連 無名関数 無名関数は結果の値が変わらな くても再計算されてしまう ↓ useCallbackでMemo化してやろ
う
© DMM 改善手法 24 useState 現状絶対更新される値で無理だ.... ↓ useStateのsetter関数って イミュータブルなんですよ コンポーネントのpropsに
setter関数を渡してあげます 再レンダリング関連 Keyboard内の処理
© DMM 改善手法 25 最終確認 propsがミュータブルな値だった ↓ propsが全てイミュータブルな値に 変更できた 再レンダリング関連
© DMM 改善手法 26 結果 Keyboardコンポーネントをメモ化する ↓ 再レンダリング消すことで約20%の 削減に成功 再レンダリング関連
© DMM 今日話すこと 27 1. 現状の課題点 2. ボトルネックの洗い出し 3. 改善手法
4. 学びの共有
© DMM 学びと共有 28 1. あらかじめ再レンダリングされないようなコンポーネ ント設計を心がけよう 2. パフォーマンスチューニング自体とても泥臭い作業、 銀の弾丸はほぼ見つからないから地道にみてやろう
© DMM ご清聴ありがとうございました