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
620
組み込みアプリパフォーマンス格闘記 検索画面編
ayumu
December 18, 2024
Tweet
Share
Other Decks in Technology
See All in Technology
生成AIによる情報システムへのインパクト
taka_aki
1
200
Jitera Company Deck / JP
jitera
0
250
AI エンジニアの立場からみた、AI コーディング時代の開発の品質向上の取り組みと妄想
soh9834
8
590
[MIRU2025]Preference Optimization for Multimodal Large Language Models for Image Captioning Tasks
keio_smilab
PRO
0
100
Webの技術とガジェットで那須の子ども達にワクワクを! / IoTLT_20250720
you
PRO
0
130
ファインディにおける Dataform ブランチ戦略
hiracky16
0
210
増え続ける脆弱性に立ち向かう: 事前対策と優先度づけによる 持続可能な脆弱性管理 / Confronting the Rise of Vulnerabilities: Sustainable Management Through Proactive Measures and Prioritization
nttcom
1
210
KCD Lima: eBee in Peru!
lizrice
0
110
TypeScript 上達の道
ysknsid25
23
4.8k
Ktor + Google Cloud Tasks/PubSub におけるOTel Messaging計装の実践
sansantech
PRO
1
330
AI時代の知識創造 ─GeminiとSECIモデルで読み解く “暗黙知”と創造の境界線
nyagasan
0
160
LLMでAI-OCR、実際どうなの? / llm_ai_ocr_layerx_bet_ai_day_lt
sbrf248
0
120
Featured
See All Featured
Docker and Python
trallard
45
3.5k
RailsConf 2023
tenderlove
30
1.2k
Automating Front-end Workflow
addyosmani
1370
200k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Site-Speed That Sticks
csswizardry
10
720
GraphQLとの向き合い方2022年版
quramy
49
14k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
A better future with KSS
kneath
238
17k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
It's Worth the Effort
3n
185
28k
BBQ
matthewcrist
89
9.8k
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 ご清聴ありがとうございました