アプリでのオーバードローの回避

​

オーバードロー検出の構成

​

オーバードローの結果の解釈

​

オーバードローを削減する方法

​

ビュー階層のフラット化

// React Nativeはこのコードをネイティブにフラット化します。

import React from "react";
import { View, Text, StyleSheet } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.cardOuter}>
        <View style={styles.cardInner}>
          <Text style={styles.cardText}>React Nativeによるビューのフラット化の例</Text>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f4f4f4",
  },
  cardOuter: {
    padding: 12,
    borderRadius: 8,
  },
  cardInner: {
    padding: 16,
    borderRadius: 8,
  },
  cardText: {
    fontSize: 16,
    color: "#333",
  },
});

​

透明の回避によるGPUワークロードの削減

• サイドバーメニューをアプリのほかの部分とは異なる背景色でレンダリングする。これはオーバードローにつながります。
• 意図したUI/UXを実現するために半透明のレイヤーを使用する。

1. 可能な場合は透明ではなく不透明な色を使用します。
2. backgroundColorの過度な使用は避けます。
3. 可能な限り、backgroundColorはルートレベルで1つ設定し、ビューごとper-Viewに背景色を設定しないようにします。
4. 単色や半透明のレイヤーの積み重ね（たとえば、背景色グレー、背景色白、不透明度、シャドウ）を行わないようにします。

// 非推奨：
<View style={{ backgroundColor: 'rgba(255, 0, 0, 0.5)' }} />

// 単色を推奨：
<View style={{ backgroundColor: 'red' }} />

​

画像の最適化

1. ユースケースに適した画像形式を選択します。
   • JPEG：写真や複雑な画像
   • PNG：透明部分のある画像
   • WebP：JPEG/PNGよりも高圧縮
   • SVG：シンプルなアイコンとグラフィック
2. ディスプレイのサイズに合わせて、適切なサイズと解像度の画像を使用します。画像アセットをさまざまなサイズ（サムネイル、ポスター、全画面）で利用できない場合は、サイズ変更を検討します。
3. 異なる画面密度に応じて複数の解像度を使用します。
   • 標準解像度ではmy-image.png（1x）
   • （解像度が2倍のデバイス用）
   • （解像度が3倍のデバイス用）
4. レスポンシブデザインでは、パーセンテージベースのディメンションまたはresizeModeを使用します。これにより、さまざまな画面サイズに合わせて画像が適切に拡大縮小されます。
5. resizeMode: stretchは使用しないようにします。これを使用すると画像がゆがみ、レンダリングオーバーヘッドの原因となります。縦横比を維持するには、「contain」または「cover」を使用します。
   <Image
   style={{ width: 100, height: 100 }}
   source={{ uri: 'image.jpg' }}
   resizeMode="contain"
   />
   
6. 複数のアイコンを1つのファイルにまとめると、GPUのワークロードが軽減されます。

​

画面外のコンテンツの削減

1. ユースケースに適した仮想化コンポーネントを選択します。
2. 大きい画面外コンテンツ領域をレンダリングしないようにします。
3. スクロールするまで表示されないコンテンツには遅延読み込みを実装します。
4. 非表示のUI要素のレンダリングを削除または延期します。

​

transformプロパティによるアニメーションの最適化

  // 次のようなレイアウトプロパティのアニメーション化は避けます。
  <Animated.View style={{ height: animatedHeight }}>
    ...
  </Animated.View>

  // 代わりに、transformプロパティをアニメーション化します。
  <Animated.View style={{ transform: [{ translateY: animatedTranslateY }] }}>
    ...
  </Animated.View>

​

要約

1. 画像とアニメーションを最適化する。
2. 不要な再レンダリングを減らす。
3. 不要なラッパーを削除する。
4. FlashListなどの適切なコンポーネントを使用する。
5. GPUのワークロードと再処理を削減する。

​

関連トピック

• 並列レンダリングによるアプリのパフォーマンスの向上
• アプリのパフォーマンスに関するベストプラクティス