Question

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

Answer 1

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

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

同时检查this SO answer。

Answer 2

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

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

确保按Debug on remote JS启用command+D并选择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',
  },
});

使用React Native分析JS

2 个答案: