React Nativeを使ったJSのプロファイリング

Question

私のアプリは、グラフィカルに複雑なインタラクティブコントロールを使用しています。それらは古いデバイスではゆっくりと実行されています。実際のレンダリングは速く、インストゥルメントのアプリケーションをプロファイリングすると、ほとんどの作業はexecuteJSCallで行われ、問題がJavaScriptかブリッジのシリアル化にあることが示唆されます。どのようなツールを使って絞り込むことができますか？

Answer 1

RNに組み込まれているSystraceは、アプリで何が起こっているかについての有益な情報を提供しません。私の所見からは、React Nativeの内部動作の多くが示されていますが、アプリケーションの実際のコードを特定するのに直接役立つものではありません。

Slowlogは、パフォーマンスのボトルネックを探す場所に関する詳細を教えてくれました。機能レベルでは限界がありますが、Systraceよりも優れています。

this SO answerもチェックしてください。モバイル側

Answer 2

、我々は/使用が特定のコンポーネントを更新/ インポートパフォーマンス・

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

スタート測定

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

停止測定をマウントする無駄な時間を測定するRCTRenderingPerfを使用することができ印刷結果

PrefMonitor.stop();

結果を印刷するためにprintメソッドを明示的に呼び出す必要はありません。stop()は既にそれをカバーしています。 あなたはまた、AndroidのUIのパフォーマンスをチェックするためにsystraceを使用することができ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){ 
    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', 
    }, 
});