使用 React Native 分析 JS答案

【问题标题】：Profiling JS with React Native使用 React Native 分析 JS
【发布时间】：2019-04-12 03:58:23
【问题描述】：

我的应用使用图形复杂的交互式控件。它们在旧设备上运行缓慢。实际渲染速度很快，在 Instruments 中分析应用程序显示大部分工作都在 executeJSCall 中完成，这表明问题出在 javascript 或桥序列化中。我可以使用哪些工具来缩小范围？

【问题讨论】：

有没有找到分析 JS 的方法？我也面临着类似的问题。
是的，如果您打开调试菜单并点击 Start Systrace，它将开始分析。然后在完成后停止它。但是，报告最初不会打开。检查here。

标签： react-native

【解决方案1】：

RN 的内置 Systrace 不提供有关应用程序中正在发生的事情的有用信息。根据我的观察，它展示了 React Native 的许多内部工作原理，但这并不能直接帮助确定应用程序中的实际代码。

Slowlog 为我提供了更多关于在哪里寻找性能瓶颈的信息。它在功能级别进行测量，有其局限性，但比 Systrace 更好。

同时检查this SO answer。

【讨论】：

Slowlog 似乎很有希望，但已停产。

【解决方案2】：

在移动端，我们可以使用 RCTRenderingPerf 来衡量挂载/更新某个组件所用/浪费的时间导入性能

import PerfMonitor from 'react-native/Libraries/Performance/RCTRenderingPerf';

开始测量

PerfMonitor.toggle();
PerfMonitor.start();

停止测量并打印结果

PerfMonitor.stop();

您不需要显式调用 print 方法来打印结果，stop() 已经涵盖了这一点。您也可以使用systrace 来检查Android UI 性能https://facebook.github.io/react-native/docs/performance.html#profiling

确保通过按command+D 启用Debug on remote JS 并选择Debug remote JS，它将显示每个组件和嵌套子组件的基于表格的渲染时间

以下是在App.js中挂接的源代码

export default class App extends React.Component {

  constructor(props){
    super(props)
    this.state= {index:1}
  }

  _setIndex(idx){
    PerfMonitor.toggle();
    PerfMonitor.start();
    this.setState({index:idx})
  }

  componentDidUpdate(){
    PerfMonitor.stop();
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>Welcome to react-native {helloWorld()}</Text>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Changes you make will automatically reload.</Text>
        <Text>Shake your phone to open the developer menu.</Text>
        <Button title="click me to see profiling in console log" onPress={()=> this._setIndex(2)}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

【讨论】：