Профилирование JS с помощью React Native

Question

Мое приложение использует графически сложные интерактивные элементы управления. Они работают медленно на старых устройствах. Фактический рендеринг быстрый и профилирование приложения в Инструментах показывает, что большая часть работы выполняется в executeJSCall, предполагая, что проблема заключается в javascript или в сериализации моста. Какие инструменты я могу использовать, чтобы сузить его?

Answer 1

Встроенная Systrace RN не содержит полезной информации о том, что происходит в приложении. По моим наблюдениям, он показывает много внутренних действий React Native, но это напрямую не помогает точно определить фактический код в приложении.

Slowlog дал мне больше информации о том, где искать узкие места для производительности. Он измеряет уровень функции, который имеет свои пределы, но лучше, чем Systrace.

Также проверьте this SO answer.

Answer 2

На подвижной стороне, мы можем использовать RCTRenderingPerf для измерения времени используется/впустую для установки/обновления определенного компонента Импорт Perf

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

измерения Начало

PrefMonitor.toggle(); 
PrefMonitor.start(); 

измерения Стоп и распечатать Результаты

PrefMonitor.stop();

Вам не нужно явно вызывать метод печати для печати результатов, 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){ 
    PrefMonitor.toggle(); 
    PrefMonitor.start(); 
    this.setState({index:idx}) 
    } 

    componentDidUpdate(){ 
    PrefMonitor.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', 
    }, 
});