/mrsekut-p/RNのJanky Framesの改善

generated at 2/18/2025, 11:30:20 AM
RNのJanky Framesの改善
#ReactNativeのパフォーマンス


フレームのdropされ具合で見る
iOS SimulatorのPerf Monitorにより計測できる
Android StudioのPerformance Monitorもある
Androidの方が低下しがち
なのでAndroidを見て改善すればいいと思う



原因と改善手法
console.logはJavaScript Threadでボトルネックを引き起こす可能性がある ref
babel-uplugin-transform-remove-consoleで自動削除できる ref
もしくはエントリポイントで消す
tsif (!__DEV__) {
  console.log = null;
  console.info = null;
  console.warn = null;
  console.error = null;
  console.debug = null;
}
InteractionManagerを使用する
これ頻繁に使用する割に名前が長いのが嫌なんだよな
LayoutAnimationを使用する	
最強のUXが求められる場合はInteractionManagerよりもこちらを使ったほうがいい #??
判断基準がわからない
https://reactnative.dev/docs/performance#dropping-js-thread-fps-because-of-doing-a-lot-of-work-on-the-javascript-thread-at-the-same-time
フレームのdropの影響を受けない
https://docs.expo.io/versions/latest/react-native/layoutanimation/
https://reactnative.dev/docs/layoutanimation
https://qiita.com/kaba/items/d2fb7b22822f7add19a3
D&D的なやつは悪い原因になる
画像サイズのアニメーション化は悪い原因になる
画像をタップして拡大するなど
https://reactnative.dev/docs/performance#animating-the-size-of-an-image-drops-ui-thread-fps
TouchableXの反応が遅い ref
タッチ系の反応が遅いときは requestAnimtionFrame でラップすると良い





参考
Performance Optimizations for React Native Applications — Soshace • Soshace
Performance Overview · React Native