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
410
組み込みアプリパフォーマンス格闘記 検索画面編
ayumu
December 18, 2024
Tweet
Share
Other Decks in Technology
See All in Technology
【JAWS-UG大阪 reInvent reCap LT大会 サンバが始まったら強制終了】“1分”で初めてのソロ参戦reInventを数字で振り返りながら反省する
ttelltte
0
120
アジャイルチームが変化し続けるための組織文化とマネジメント・アプローチ / Agile management that enables ever-changing teams
kakehashi
3
3.2k
三菱電機で社内コミュニティを立ち上げた話
kurebayashi
1
340
When Windows Meets Kubernetes…
pichuang
0
290
駆け出しリーダーとしての第一歩〜開発チームとの新しい関わり方〜 / Beginning Journey as Team Leader
kaonavi
0
120
#TRG24 / David Cuartielles / Post Open Source
tarugoconf
0
540
SpiderPlus & Co. エンジニア向け会社紹介資料
spiderplus_cb
0
770
新しいスケーリング則と学習理論
taiji_suzuki
10
3.8k
LangGraphとFlaskを用いた社内資料検索ボットの実装②Retriever構築編
aoikumadaki
0
110
20240522 - 躍遷創作理念 @ PicCollage Workshop
dpys
0
310
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
6
54k
AI×医用画像の現状と可能性_2024年版/AI×medical_imaging_in_japan_2024
tdys13
1
1.3k
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Code Reviewing Like a Champion
maltzj
521
39k
Fireside Chat
paigeccino
34
3.1k
How to train your dragon (web standard)
notwaldorf
89
5.8k
Mobile First: as difficult as doing things right
swwweet
222
9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.2k
Visualization
eitanlees
146
15k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.2k
Designing for Performance
lara
604
68k
A designer walks into a library…
pauljervisheath
205
24k
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 ご清聴ありがとうございました