React Native로 JS 프로파일 링

Question

내 앱은 그래픽으로 복잡한 대화 형 컨트롤을 사용합니다. 오래된 장치에서는 천천히 실행됩니다. 실제 렌더링은 빠르고 도구에서 앱을 프로파일 링하면 대부분의 작업이 executeJSCall으로 이루어져서 문제가 자바 스크립트 또는 브릿지 직렬화에 있음을 알 수 있습니다. 어떤 도구를 사용하여 범위를 좁힐 수 있습니까?

Answer 1

RN에 내장 된 Systrace는 앱의 현재 상황에 대한 유용한 정보를 제공하지 않습니다. 필자의 관찰에 따르면 React Native의 많은 내부 동작을 보여 주지만 응용 프로그램의 실제 코드를 정확히 찾아내는 데 도움이되지는 않습니다.

Slowlog은 성능 병목 현상을 찾는 위치에 대한 자세한 정보를 제공합니다. 제한이있는 기능 수준에서 측정되지만 Systrace보다 좋습니다.

this SO answer도 확인하십시오.

모바일 측면에서

Answer 2

, 우리가 사용하는 시간을 측정 RCTRenderingPerf을 사용할 수 있습니다// 마운트 특정 구성 요소를 업데이트 가져 오기를 성능을

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

시작 측정

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

정지 측정하는 낭비 인쇄 결과

PrefMonitor.stop();

stop()은 이미 결과를 인쇄하기 위해 명시 적으로 print 메소드를 호출 할 필요가 없습니다. 당신은 또한 구성 요소와 중첩 된 하위 구성 요소의 각 테이블 기반의 렌더링 시간을 보여줍니다 있는지 당신이 command+D를 눌러 Debug on remote JS를 사용할 수 있는지 확인 안드로이드 UI 성능 https://facebook.github.io/react-native/docs/performance.html#profiling

을 확인 systrace를 사용 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', 
    }, 
});