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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
ayumu
December 18, 2024
Technology
1
760
組み込みアプリパフォーマンス格闘記 検索画面編
ayumu
December 18, 2024
Tweet
Share
Other Decks in Technology
See All in Technology
JAWS Days 2026 楽しく学ぼう! 認証認可 入門/20260307-jaws-days-novice-lane-auth
opelab
10
1.7k
Claude Codeの進化と各機能の活かし方
oikon48
21
11k
タスク管理も1on1も、もう「管理」じゃない ― KiroとBedrock AgentCoreで変わった"判断の仕事"
yusukeshimizu
5
2.5k
マルチロールEMが実践する「組織のレジリエンス」を高めるための組織構造と人材配置戦略
coconala_engineer
3
690
OCI Security サービス 概要
oracle4engineer
PRO
2
13k
トップマネジメントとコンピテンシーから考えるエンジニアリングマネジメント
zigorou
4
820
PMBOK第8版は第7版から何が変わったのか(PMBOK第8版概要解説) / 20260304 Takeshi Watarai
shift_evolve
PRO
0
140
製造業ドメインにおける LLMプロダクト構築: 複雑な文脈へのアプローチ
caddi_eng
1
550
DevOpsエージェントで実現する!! AWS Well-Architected(W-A) を実現するシステム設計 / 20260307 Masaki Okuda
shift_evolve
PRO
3
480
8万デプロイ
iwamot
PRO
2
200
JAWSDAYS2026_A-6_現場SEが語る 回せるセキュリティ運用~設計で可視化、AIで加速する「楽に回る」運用設計のコツ~
shoki_hata
0
2.9k
Dr. Werner Vogelsの14年のキーノートから紐解くエンジニアリング組織への処方箋@JAWS DAYS 2026
p0n
1
120
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3.3k
Product Roadmaps are Hard
iamctodd
PRO
55
12k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
55k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
kimpetersen
PRO
0
270
The Illustrated Children's Guide to Kubernetes
chrisshort
51
52k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
madoxten
61
52k
Building the Perfect Custom Keyboard
takai
2
710
We Analyzed 250 Million AI Search Results: Here's What I Found
joshbly
1
930
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
State of Search Keynote: SEO is Dead Long Live SEO
ryanjones
0
150
How to make the Groovebox
asonas
2
2k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.6k
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 ご清聴ありがとうございました