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
600
組み込みアプリパフォーマンス格闘記 検索画面編
ayumu
December 18, 2024
Tweet
Share
Other Decks in Technology
See All in Technology
【TiDB GAME DAY 2025】Shadowverse: Worlds Beyond にみる TiDB 活用術
cygames
0
1.1k
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
2
220
~宇宙最速~2025年AWS Summit レポート
satodesu
1
1.9k
GitHub Copilot の概要
tomokusaba
1
130
M3 Expressiveの思想に迫る
chnotchy
0
110
“社内”だけで完結していた私が、AWS Community Builder になるまで
nagisa53
1
400
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
110
Snowflake Summit 2025 データエンジニアリング関連新機能紹介 / Snowflake Summit 2025 What's New about Data Engineering
tiltmax3
0
310
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
1
170
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
190
BigQuery Remote FunctionでLooker Studioをインタラクティブ化
cuebic9bic
3
320
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方(JaSST'25 Kansai)
mizunori
1
230
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
GraphQLとの向き合い方2022年版
quramy
48
14k
Producing Creativity
orderedlist
PRO
346
40k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
A better future with KSS
kneath
239
17k
How STYLIGHT went responsive
nonsquared
100
5.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
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 ご清聴ありがとうございました