Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ReactNative製アプリがAndroidだと遅いという問題に立ち向かった話/the pr...

ReactNative製アプリがAndroidだと遅いという問題に立ち向かった話/the problem that React Native apps are slow on Android

stand.fm

May 21, 2021
Tweet

More Decks by stand.fm

Other Decks in Programming

Transcript

  1. 自己紹介 - 三堀 裕(みつほり ゆう) - ホリー - stand.fm所属(2021/01~) -

    Android, Flutterなどモバイル開発がメイン - ReactNativeはstand.fmで初めて触りました - 趣味:ダーツ、コーヒー、旅行、(麻雀) @1013Youmeee youmitsu @youmeee 2
  2. stand.fm Androidが重いという話 - ユーザーの方々の声 - Androidアプリが重いのでどうにかしてほしい - 画面遷移が遅い(遷移するまで 10秒かかる) -

    画面が固まる(fpsが落ちる) - etc... 6 パフォーマンス最適化のための改善をいくつか実施 今回はその中で4つ紹介します
  3. 8 react-navigationの画面遷移速度改善 
 react-navigationの画面遷移時のアニメーションをブロックしてしまうのが原因 
 - componentDidMountでの非同期処理(async-await) 
 - 最初にマウントされるコンポーネントの量が多い

    
 
 
 1. componentDidMountのタイミングでawaitを使わない 
 2. ReactNativeのInteractionManagerを使う 
 3. 初期化時にmountされるコンポーネントを減らす 
 https://reactnavigation.org/
  4. 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> ) }
  5. 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> )
  6. 13 MaskedViewのレンダリング負荷への対応 
 - masked-viewというReactNativeでマスク処理をするライブラリ 
 - https://www.npmjs.com/package/@react-native-community/ 
 masked-view


    - Live画面のコメントリストの境界をぼかすために使っていた 
 - FlatListをラップする形 
 - MaskedViewが頻繁にレンダリングされると端末のリソースが 
 著しく増加してしまう問題があった 
 MaskedViewを表示させないように修正 

  7. - 以下の3つの指標の改善に効果があった 
 - CPU使用率、メモリ使用量、バッテリー使用率 
 - フレームレートの改善にも効果があった 
 14

    MaskedViewのレンダリングによるメモリ使用量の比較 
 Mask表示 Mask非表示 ←メモリ→ ←CPU→
 ←バッテリー→ ←ネットワーク→ 「1GBくらいまで消費→GC」を頻繁に繰り返している メモリ使用量が平坦になっている
  8. 16 Hermesの導入
 - stand.fm Androidでは、JavaScriptエンジンにJavaScriptCore(jsc)を使っていたが、Hermesに移 行した
 - Hermesのメリット
 - アプリサイズの削減(jscoreより約2MB削減)

    
 - 起動速度の高速化
 - メモリ使用量の削減 
 - クラッシュフリーレートの改善にも効果があった 
 - 97.5%→99.5%
 - https://github.com/facebook/hermes 

  9. 18 setIntervalのclear漏れ(バグ)
 - これが一番の原因だった
 - 放送音声の再生位置の取得のため、200ミリ秒ごとにネイティブモジュールの再生位置を取得 するメソッドを呼び出していた(setInterval) 
 - clearIntervalが正常に行われていなかったことによって、放送画面がUnmountされたあともずっ

    と再生位置の取得処理が行われる 
 - 別の音声を再生するとまたinterval処理が新たに実行されるため、放送を再生した数の分アプ リが重くなる現象が起きていた
 - 最悪の場合「Excessive number of pending callbacks: 501.」が出てアプリが落ちる 
 clearIntervalをcomponentWillUnmount時に実行するように修正
  10. We are hiring! エンジニア積極的に募集中です https://corp.stand.fm/recruit 詳細はこちら • CTO候補 • VPoE候補

    • クライアントエンジニア • バックエンドエンジニア • 機械学習エンジニア • 配信基盤エンジニア • QAエンジニア • エンジニアリングマネージャー • UI/UXデザイナー 積極募集しているプロダクト開発メンバー