Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
ReactNative製アプリがAndroidだと遅いという問題に立ち向かった話/the problem that React Native apps are slow on Android
stand.fm
May 21, 2021
Programming
1
1.9k
ReactNative製アプリがAndroidだと遅いという問題に立ち向かった話/the problem that React Native apps are slow on Android
stand.fm
May 21, 2021
Tweet
Share
More Decks by stand.fm
See All by stand.fm
stand.fm会社紹介資料
standfm
0
54
stand.fmのTypeScriptへの移行と活用/migrating-to-typescript-standfm
standfm
0
1.5k
stand.fmの最近の取り組み: アプリ起動速度の改善/improvement-of-speed-startup-app
standfm
3
1.8k
LIVEの負荷対策と監視について / About LIVE load countermeasures and monitoring
standfm
0
7.2k
声でつながる、 優しい世界を創るUI/UX
standfm
4
380
stand.fm(Android)におけるreact-native-track-playerの改善/Improvement of react-native-track-player on standfm Android app
standfm
0
170
stand.fmにおける開発体験とパフォーマンスの向上 / Development Experience and Performance improvement
standfm
1
6.5k
React NativeアプリでコラボLIVE配信 / Collaboration Live Streaming with React Native App
standfm
1
2.6k
エンジニア向け会社紹介資料 / company deck for engineers
standfm
7
63k
Other Decks in Programming
See All in Programming
What's new in Shopware 6.5
shyim
0
130
ITエンジニア特化型Q&Aサイトteratailを 言語、DB、クラウドなど フルリプレイスした話
leveragestech
0
470
Zynq MP SoC で楽しむエッジコンピューティング ~RTLプログラミングのススメ~
ryuz88
0
410
Remix + Cloudflare Pages + D1 で ポケモン SV のレンタルチームを検索できるアプリを作ってみた
kuroppe1819
4
1.4k
和暦を正しく扱うための暦の話
nagise
10
6.7k
PHPDocにおける配列の型定義を少し知る
shimabox
1
140
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
42k
Gradle build: The time is now
nonews
1
510
Cloudflare Workersと状態管理
chimame
3
510
新卒でサービス立ち上げから Hasuraを使って3年経った振り返り
yutorin
0
240
Milestoner
bkuhlmann
1
250
Excelの助けを借りて楽にシナリオを作ろう
rpa_niiyama
0
340
Featured
See All Featured
Optimizing for Happiness
mojombo
365
64k
KATA
mclloyd
12
9.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.5k
Rails Girls Zürich Keynote
gr2m
87
12k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
175
9.1k
Art, The Web, and Tiny UX
lynnandtonic
284
18k
A Modern Web Designer's Workflow
chriscoyier
689
180k
Atom: Resistance is Futile
akmur
256
24k
From Idea to $5000 a Month in 5 Months
shpigford
374
44k
Bootstrapping a Software Product
garrettdimon
299
110k
Designing for humans not robots
tammielis
245
24k
BBQ
matthewcrist
75
8.1k
Transcript
ReactNative製アプリがAndroidだと遅いと いう問題に立ち向かった話 株式会社stand.fm エンジニア 三堀 裕 2021/05/21 React Native Meetup #12 LT大会!
自己紹介 - 三堀 裕(みつほり ゆう) - ホリー - stand.fm所属(2021/01~) -
Android, Flutterなどモバイル開発がメイン - ReactNativeはstand.fmで初めて触りました - 趣味:ダーツ、コーヒー、旅行、(麻雀) @1013Youmeee youmitsu @youmeee 2
- stand.fm Androidが重いという話 - パフォーマンスチューニングの話 a. react-navigationの画面遷移速度の改善 b. MaskedViewのレンダリング負荷への対応 c.
Hermesの導入 d. setIntervalのclear漏れ - まとめ アジェンダ
- stand.fm Androidが重いという話 - パフォーマンスチューニングの話 a. react-navigationの画面遷移速度の改善 b. MaskedViewのレンダリング負荷への対応 c.
Hermesの導入 d. setIntervalのclear漏れ - まとめ アジェンダ
stand.fmは誰でもかんたんに アプリで収録・LIVE配信ができる音声 プラットフォーム
stand.fm Androidが重いという話 - ユーザーの方々の声 - Androidアプリが重いのでどうにかしてほしい - 画面遷移が遅い(遷移するまで 10秒かかる) -
画面が固まる(fpsが落ちる) - etc... 6 パフォーマンス最適化のための改善をいくつか実施 今回はその中で4つ紹介します
- stand.fm Androidが重いという話 - パフォーマンスチューニングの話 a. react-navigationの画面遷移速度の改善 b. MaskedViewのレンダリング負荷への対応 c.
Hermesの導入 d. setIntervalのclear漏れ - まとめ アジェンダ
8 react-navigationの画面遷移速度改善 react-navigationの画面遷移時のアニメーションをブロックしてしまうのが原因 - componentDidMountでの非同期処理(async-await) - 最初にマウントされるコンポーネントの量が多い
1. componentDidMountのタイミングでawaitを使わない 2. ReactNativeのInteractionManagerを使う 3. 初期化時にmountされるコンポーネントを減らす https://reactnavigation.org/
9 ReactNativeのInteractionManagerを使う - InteractionManagerのrunAfterInteractionと呼ばれるコールバックを使用し、画面遷移アニメーション が終わってから初期化処理やレンダリングなどを実行させるようにする state = { afterInteractions:
false, } componentDidMount = () => { this.interactionPromise = InteractionManager.runAfterInteractions(() => { this.setState({ afterInteractions: true }) }) } render () { return ( <SafeAreaView> { this.state.afterInteractions && <ScreenContent /> } </SafeAreaView> ) }
10 hooksでrunAfterInteractionを使う // カスタムフックを定義 export const useAfterInteractions = (func:
() => any) => useEffect(() => { const interactionPromise = InteractionManager.runAfterInteractions(() => { func() }) return () => interactionPromise.cancel() }, []) const [afterInteractions, setAfterInteractions] = useState(false) useAfterInteractions(() => { setAfterInteractions(true) }) return ( <SafeAreaView> { afterInteractions && <ScreenContent /> } </SafeAreaView> )
11 対応後の画面遷移速度の比較 - ボタンをタップしてからチャンネル画面への画面遷移が完了するまでの所要時間を計測(施行 回数:30回) - 平均で約300ミリ秒速度が改善 平均: 1550ms
平均: 1245ms 約 300ms 改善
- stand.fm Androidが重いという話 - パフォーマンスチューニングの話 a. react-navigationの画面遷移速度の改善 b. MaskedViewのレンダリング負荷への対応 c.
Hermesの導入 d. setIntervalのclear漏れ - まとめ アジェンダ
13 MaskedViewのレンダリング負荷への対応 - masked-viewというReactNativeでマスク処理をするライブラリ - https://www.npmjs.com/package/@react-native-community/ masked-view
- Live画面のコメントリストの境界をぼかすために使っていた - FlatListをラップする形 - MaskedViewが頻繁にレンダリングされると端末のリソースが 著しく増加してしまう問題があった MaskedViewを表示させないように修正
- 以下の3つの指標の改善に効果があった - CPU使用率、メモリ使用量、バッテリー使用率 - フレームレートの改善にも効果があった 14
MaskedViewのレンダリングによるメモリ使用量の比較 Mask表示 Mask非表示 ←メモリ→ ←CPU→ ←バッテリー→ ←ネットワーク→ 「1GBくらいまで消費→GC」を頻繁に繰り返している メモリ使用量が平坦になっている
- stand.fm Androidが重いという話 - パフォーマンスチューニングの話 a. react-navigationの画面遷移速度の改善 b. MaskedViewのレンダリング負荷への対応 c.
Hermesの導入 d. setIntervalのclear漏れ - まとめ アジェンダ
16 Hermesの導入 - stand.fm Androidでは、JavaScriptエンジンにJavaScriptCore(jsc)を使っていたが、Hermesに移 行した - Hermesのメリット - アプリサイズの削減(jscoreより約2MB削減)
- 起動速度の高速化 - メモリ使用量の削減 - クラッシュフリーレートの改善にも効果があった - 97.5%→99.5% - https://github.com/facebook/hermes
- stand.fm Androidが重いという話 - パフォーマンスチューニングの話 a. react-navigationの画面遷移速度の改善 b. MaskedViewのレンダリング負荷への対応 c.
Hermesの導入 d. setIntervalのclear漏れ - まとめ アジェンダ
18 setIntervalのclear漏れ(バグ) - これが一番の原因だった - 放送音声の再生位置の取得のため、200ミリ秒ごとにネイティブモジュールの再生位置を取得 するメソッドを呼び出していた(setInterval) - clearIntervalが正常に行われていなかったことによって、放送画面がUnmountされたあともずっ
と再生位置の取得処理が行われる - 別の音声を再生するとまたinterval処理が新たに実行されるため、放送を再生した数の分アプ リが重くなる現象が起きていた - 最悪の場合「Excessive number of pending callbacks: 501.」が出てアプリが落ちる clearIntervalをcomponentWillUnmount時に実行するように修正
- stand.fm Androidが重いという話 - パフォーマンスチューニングの話 a. react-navigationの画面遷移速度の改善 b. MaskedViewのレンダリング負荷への対応 c.
Hermesの導入 d. setIntervalのclear漏れ - まとめ アジェンダ
まとめ - iOSに比べると、Android端末はスペック差によるパフォーマンスの影響を受けやすい - react-navigation使用時は画面遷移時のアニメーションをブロックしないようにする - InteractionManagerを使う。componentDidMount時にawaitを極力使わない - 特にAndroidではアニメーションやマスク処理周りは端末リソースに負荷がかかる場合がある ので注意が必要
- Hermesは良いぞ、clearInterval忘れに注意 - 他にもいくつかパフォーマンス改善 issueを計画中。ユーザーに気持ちよくアプリを使ってもらう ための改善を諦めずにやっていきたい 20
We are hiring! エンジニア積極的に募集中です https://corp.stand.fm/recruit 詳細はこちら • CTO候補 • VPoE候補
• クライアントエンジニア • バックエンドエンジニア • 機械学習エンジニア • 配信基盤エンジニア • QAエンジニア • エンジニアリングマネージャー • UI/UXデザイナー 積極募集しているプロダクト開発メンバー
None