JS幀率（JavaScript線程）

UI幀率（主線程）

性能問題的常見來源

在開發模式下運行 (dev=true)

使用 console.log 描述

{
  "env": {
    "production": {
      "plugins": ["transform-remove-console"]
    }
  }
}

ListView初始渲染太慢或滾動性能對大型列表不利

請改用新的 FlatList 或 SectionList 組件。除了簡化API之外，新的列表組件還具有顯著的性能增強，主要的是對任意數量的行幾乎恆定的內存使用。

如果 FlatList 渲染速度很慢，請確保已實現 getItemLayout 以通過跳過渲染項的測量來優化渲染速度。

當重新渲染幾乎沒有變化的視圖時，JS FPS 會急劇下降

如果您使用的是 ListView，則必須提供 rowHasChanged 函數，該函數可以通過快速確定是否需要重新呈現行來減少大量工作。如果您使用不可變數據結構，這將像引用相等性檢查一樣簡單。

同樣，您可以實現 shouldComponentUpdate 並指示您希望組件重新呈現的確切條件。如果編寫純組件（其中render函數的返回值完全依賴於props和state），則可以利用 PureComponent 為您執行此操作。再一次，不可變數據結構對於保持這種速度非常有用 - 如果你必須對大量對象進行深度比較，那麼重新渲染整個組件可能會更快，而且肯定需要更少的代碼。

刪除JS線程FPS因為同時在JavaScript線程上做了很多工作

• LayoutAnimation僅適用於即發即棄動畫（“靜態”動畫） - 如果它必須是可中斷的，則需要使用動畫。

在屏幕上移動視圖（滾動，平移，旋轉）會丟棄UI線程FPS

動畫圖像的大小會丟棄UI線程FPS

我的 TouchableX 視圖響應不是很快

handleOnPress() {
  // Always use TimerMixin with requestAnimationFrame, setTimeout and
  // setInterval
  this.requestAnimationFrame(() => {
    this.doExpensiveAction();
  });
}

緩慢的導航過渡

1. 在此過渡期間的每個幀中，JavaScript線程需要向主線程發送新的x偏移量。如果JavaScript線程被鎖定，則無法執行此操作，因此該幀上不會發生更新，並且動畫會斷斷續續。

剖析

使用 systrace 分析 Android UI 性能

1. 收集痕跡

$ <path_to_android_sdk>/platform-tools/systrace/systrace.py --time=10 -o trace.html sched gfx view -a <your_package_name>

• time是以秒為單位收集跟踪的時間長度
• sched, gfx, 和view 是我們關心的android SDK標籤（標記集合）：sched為您提供有關手機每個核心上運行的內容的信息，gfx為您提供圖形信息，如框架邊界，以及視圖為您提供有關測量，佈局和繪製過程
• -a <your_package_name>啟用特定於應用程序的標記，特別是React Native框架中內置的標記。 your_package_name可以在app的AndroidManifest.xml中找到，看起來像com.example.app

2.閱讀踪跡

提示：使用WASD鍵進行掃描和縮放

• 打開 chrome 的 chrome://tracing  頁籤
• 選擇負載
• 選擇從上一個命令生成的html文件。

啟用VSync突出顯示

選中屏幕右上角的此復選框以突出顯示16ms幀邊界：

您應該看到斑馬條紋，如上面的屏幕截圖所示。如果不這樣做，請嘗試在其他設備上進行性能分析：已知三星在顯示vsyncs時遇到問題，而Nexus系列通常非常可靠。

3. 找到你的過程

• UI Thread。這是標準的android測量/佈局/繪製發生的地方。右側的線程名稱將是您的包名稱（在我的情況下是book.adsmanager）或UI Thread。您在此線程上看到的事件看起來應該是這樣的，並且與Choreographer，遍歷和DispatchUI有關：
  
• JS Thread. 這是執行JavaScript的地方。線程名稱將是mqt_js或<...>，具體取決於設備上內核的協作程度。要識別它沒有名稱，請查找JSCall，Bridge.executeJSCall等內容：
  
• Native Modules Thread. 這是執行本機模塊調用（例如UIManager）的地方。線程名稱將是mqt_native_modules或<...>。要在後一種情況下識別它，請查找NativeCall，callJavaModuleMethod和onBatchComplete等內容：
  
• Bonus: Render Thread. 如果你正在使用Android L（5.0）及更高版本，你的應用程序中也會有一個渲染線程。該線程生成用於繪製UI的實際OpenGL命令。線程名稱將是RenderThread或<...>。要在後一種情況下識別它，請查找DrawFrame和queueBuffer之類的內容：
  

找出罪魁禍首

解決JavaScript問題

解決本機UI問題

1. 您嘗試繪製每個幀的UI涉及GPU上的太多工作，或者
2. Y您正在動畫/交互期間構建新UI（例如，在滾動期間加載新內容）。

GPU 工作太多了

• 調查使用renderToHardwareTextureAndroid進行動畫/轉換的複雜靜態內容（例如Navigator  slide/ alpha animations）
• 確保您沒有使用needsOffscreenAlphaCompositing，默認情況下禁用，因為它在大多數情況下會大大增加GPU上的每幀負載。

在UI線程上創建新視圖

分拆+內聯需要

加載 JavaScript

內聯需求

VeryExpensive.js

import React, { Component } from 'react';
import { Text } from 'react-native';
// ... import some very expensive modules

// You may want to log at the file level to verify when this is happening
console.log('VeryExpensive component loaded');

export default class VeryExpensive extends Component {
  // lots and lots of code
  render() {
    return <Text>Very Expensive Component</Text>;
  }
}

Optimized.js

import React, { Component } from 'react';
import { TouchableOpacity, View, Text } from 'react-native';

let VeryExpensive = null;

export default class Optimized extends Component {
  state = { needsExpensive: false };

  didPress = () => {
    if (VeryExpensive == null) {
      VeryExpensive = require('./VeryExpensive').default;
    }

    this.setState(() => ({
      needsExpensive: true,
    }));
  };

  render() {
    return (
      <View style={{ marginTop: 20 }}>
        <TouchableOpacity onPress={this.didPress}>
          <Text>Load</Text>
        </TouchableOpacity>
        {this.state.needsExpensive ? <VeryExpensive /> : null}
      </View>
    );
  }
}

啟用分拆

export BUNDLE_COMMAND="unbundle"
export NODE_BINARY=node
../node_modules/react-native/packager/react-native-xcode.sh

project.ext.react = [
  bundleCommand: "unbundle",
]

project.ext.react = [
  bundleCommand: "unbundle",
  extraPackagerArgs: ["--indexed-unbundle"]
]

配置預加載和內聯需求

添加打包程序配置文件

const config = {
  getTransformOptions: () => {
    return {
      transform: { inlineRequires: true },
    };
  },
};

module.exports = config;

export BUNDLE_COMMAND="unbundle"
export BUNDLE_CONFIG="packager/config.js"
export NODE_BINARY=node
../node_modules/react-native/packager/react-native-xcode.sh

project.ext.react = [
  bundleCommand: "unbundle",
  bundleConfig: "packager/config.js"
]

調查加載的模塊

const modules = require.getModules();
const moduleIds = Object.keys(modules);
const loadedModuleNames = moduleIds
  .filter(moduleId => modules[moduleId].isInitialized)
  .map(moduleId => modules[moduleId].verboseName);
const waitingModuleNames = moduleIds
  .filter(moduleId => !modules[moduleId].isInitialized)
  .map(moduleId => modules[moduleId].verboseName);

// make sure that the modules you expect to be waiting are actually waiting
console.log(
  'loaded:',
  loadedModuleNames.length,
  'waiting:',
  waitingModuleNames.length
);

// grab this text blob, and put it in a file named packager/moduleNames.js
console.log(`module.exports = ${JSON.stringify(loadedModuleNames.sort())};`);

require.Systrace.beginEvent = (message) => {
  if(message.includes(problematicModule)) {
    throw new Error();
  }
}

轉換為模塊路徑

// @flow
/* eslint-disable no-console */
const execSync = require('child_process').execSync;
const fs = require('fs');
const moduleNames = require('./moduleNames');

const pjson = require('../package.json');
const localPrefix = `${pjson.name}/`;

const modulePaths = moduleNames.map(moduleName => {
  if (moduleName.startsWith(localPrefix)) {
    return `./${moduleName.substring(localPrefix.length)}`;
  }
  if (moduleName.endsWith('.js')) {
    return `./node_modules/${moduleName}`;
  }
  try {
    const result = execSync(
      `grep "@providesModule ${moduleName}" $(find . -name ${moduleName}\\\\.js) -l`
    )
      .toString()
      .trim()
      .split('\n')[0];
    if (result != null) {
      return result;
    }
  } catch (e) {
    return null;
  }
  return null;
});

const paths = modulePaths
  .filter(path => path != null)
  .map(path => `'${path}'`)
  .join(',\n');

const fileData = `module.exports = [${paths}];`;

fs.writeFile('./packager/modulePaths.js', fileData, err => {
  if (err) {
    console.log(err);
  }

  console.log('Done');
});

更新 config.js

const modulePaths = require('./modulePaths');
const resolve = require('path').resolve;
const fs = require('fs');

const config = {
  getTransformOptions: () => {
    const moduleMap = {};
    modulePaths.forEach(path => {
      if (fs.existsSync(path)) {
        moduleMap[resolve(path)] = true;
      }
    });
    return {
      preloadedModules: moduleMap,
      transform: { inlineRequires: { blacklist: moduleMap } },
    };
  },
};

module.exports = config;

測試和測量改進