react perf devtool
vtool
メンテナーを探しています
Reactコンポーネントのパフォーマンスを検査するための開発者
導入
デモ
用途
インストール
使用法
説明
フェーズ
実装
貢献
ライセンス
React Performance DevToolは、 Reactコンポーネントのパフォーマンスを検査するためのブラウザ拡張機能です。 window.performance APIを使用してReactが収集する測定に基づいて、Reactコンポーネントのパフォーマンスを統計的に調べます。
ブラウザの拡張機能に加えて、測定値はコンソールで検査することもできます。詳細については、使用法のセクションを参照してください。
このプロジェクトは、Will ChenがReact Performance Tableの提案について拡張する目的から始まりました。詳細については、こちらをご覧ください。
私のウェブサイトでのReactコンポーネントのパフォーマンスを調べるために使用されている拡張機能のデモ。
パフォーマンス測定はコンソールにログに付けることもできます。再レンダリングごとに、測定値が更新され、コンソールにログが表示されます。
使用されていないコンポーネントインスタンスを削除またはアンマウントします。
操作が開始された後、ブロッキングまたはより多くの時間をかけるものを調べてください。
テーブルを調べて、どのコンポーネントを確認する必要があるかを確認する必要があります。
どのコンポーネントがロードにもっと時間がかかるかを調べます。
このDevToolを使用するには、リスナーを登録するNPMモジュールをインストールする必要があります（これの詳細については、使用セクションで詳細）。
拡張機能のインストール
以下の拡張機能は、現在の安定したリリースを表しています。
NPMモジュールのインストール
npm install react-perf-devtool
umdビルドもUNPKGを介して利用できます
< script crossorigin src = "https://unpkg.com/[email protected]/lib/npm/hook.js" > </ script >この拡張機能とパッケージは、Reactにも依存します。それらもインストールされていることを確認してください。
注-NPMモジュールは重要であり、DevToolを使用するために必要です。したがって、ブラウザ拡張機能を使用する前に、インストールしたことを確認してください。
ドキュメントのこのセクションでは、Reactアプリにオブザーバーを登録するためのDevToolとAPIの使用について説明しています。
react-perf-devtool Chrome V52およびFirefox V57に追加されたネイティブwindow.PerformanceObserver APIに依存しています。詳細については、公式のMozillaドキュメントを参照してください。
このdevtool拡張機能を使用するには、アプリにオブザーバーを登録する必要があります。これは、時間にわたってデータのコレクション（パフォーマンス測定）を観察します。
オブザーバーを登録します
オブザーバーを登録することは非常にシンプルで、1つの関数の呼び出しのみです。どのように見てみましょう！
const { registerObserver } = require ( 'react-perf-devtool' )
// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( )このコードをindex.jsファイル（推奨）またはアプリ内の他のファイル内に配置できます。
注 - これは、Reactコンポーネントのパフォーマンスを検査する必要がある場合にのみ、開発モードで使用する必要があります。生産用に構築するときは必ず削除してください。
オブザーバーを登録すると、windowオブジェクトへの反応コンポーネントのイベントとパフォーマンス測定に関する情報を含むオブジェクトをフックします。これは、eval（）を使用して検査されたウィンドウ内でアクセスできます。
再レンダリングごとに、このオブジェクトは新しいメジャーとイベントカウントで更新されます。拡張機能は、メモリとキャッシュのクリアを整理します。
解析された測定値を含む引数を受信するoptionオブジェクトとオプションのcallbackを渡すこともできます
コールバックを使用します
オプションのコールバックは、その引数として解析された測定値を受け取るregisterObserverに渡すこともできます。
このコールバックを使用して、解析された総合的な測定値を検査することも、他のユースケースと統合することもできます。また、これらの手段を分析ダッシュボードに送信することにより、Googleアナリティクスを使用してこれらのパフォーマンス測定を活用することもできます。このプロセスはここに文書化されています。
例 -
const { registerObserver } = require ( 'react-perf-devtool' )
function callback ( measures ) {
// do something with the measures
}
// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( { } , callback )オブザーバーを登録したら、ローカル開発サーバーを開始し、 http://localhost:3000/にアクセスしてください。
注 - この拡張機能は、React 16以降のバージョンのみで機能します。
拡張機能を正常にインストールした後、Chrome開発者ツールにReact Performanceというタブが表示されます。
パフォーマンスの測定値は、コンソールにログに記録することもできます。ただし、メジャーを印刷するプロセスは直接的ではありません。メジャーを聞くサーバーをセットアップする必要があります。このために、HTTPマイクロサービスであるZeitによるMicro By Zeitを使用できます。
npm install --save micro
Option Objectを引数としてregisterObserverに渡して、ログを有効にしてポート番号を設定できるようにすることができます。
オプションオブジェクトを使用します
{
shouldLog : boolean , // default value: false
port : number // default value: 8080
timeout : number // default value: 2000
} 3つのプロパティをoption shouldLogに渡すことができますport
shouldLogブール値が必要です。 Trueに設定されている場合、メジャーはコンソールにログに記録されます。
port - メジャーが送信されるサーバーのポート番号
timeout - 拡張機能の初期化を延期するためのタイムアウト値。
アプリケーションがロードに時間がかかる場合は、 timeoutプロパティを介してタイムアウト値を指定することにより、拡張の初期化を延期する方が良いでしょう。これにより、アプリケーションがブラウザに適切にロードされた後にのみ拡張機能がロードされることが保証され、更新された測定値をレンダリングできるようになります。ただし、アプリケーションのサイズが小さい場合は、このプロパティをスキップできます。
例
// index.js file in your React App
const React = require ( 'react' )
const ReactDOM = require ( 'react-dom' )
const { registerObserver } = require ( 'react-perf-devtool' )
const Component = require ( './Component' ) // Some React Component
const options = {
shouldLog : true ,
port : 8080 ,
timeout : 12000 // Load the extension after 12 sec.
}
function callback ( measures ) {
// do something with the measures
}
// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( options , callback )
ReactDOM . render ( < Component /> , document . getElementById ( 'root' ) ) // server.js
const { json } = require ( 'micro' )
module . exports = async req => {
console . log ( await json ( req ) )
return 200
} // package.json
{
"main" : "server.js" ,
"scripts" : {
"start-micro" : "micro -p 8080"
}
}対策のスキーマ
以下は、コンソールにログされるパフォーマンス測定のスキーマです。
{
componentName ,
mount : { // Mount time
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
render : { // Render time
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
update : { // Update time
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
unmount : { // Unmount time
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
totalTimeSpent , // Total time taken by the component combining all the phases
percentTimeSpent , // Percent time
numberOfInstances , // Number of instances of the component
// Time taken in lifecycle hooks
componentWillMount : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
}
componentDidMount: {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
}
componentWillReceiveProps : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
shouldComponentUpdate : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
componentWillUpdate : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
componentDidUpdate : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
componentWillUnmount : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
}
}コンポーネント
また、 componentsプロパティを介してオプションを使用して特定のコンポーネントのパフォーマンスを検査することもできます。
例 -
const options = {
shouldLog : true ,
port : 3000 ,
components : [ 'App' , 'Main' ] // Assuming you've these components in your project
}
function callback ( measures ) {
// do something with measures
}
// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( options , callback ) 概要セクションは、アプリケーション内のすべてのコンポーネントが取得した合計時間（％）の概要を表します。
すべてのコンポーネントが取る時間 - すべてのコンポーネントが取る時間を示しています（すべてのフェーズを組み合わせます）。
変更を犯すための期間 - 変更のコミットに費やされた時間を示します。これについてはこちらをご覧ください
ホスト効果をコミットするための期間 - 新しいツリーが挿入されたときにコミットするホスト効果のコミットに費やされる時間を示します（更新）およびno。ホスト効果の（コミットでの効果カウント）。
ライフサイクルメソッドを呼び出すための期間 - ライフサイクルフックを呼び出す期間と、ライフサイクルフックがカスケードアップデートをスケジュールするときに呼ばれる方法の合計を報告します。
合計時間
クリア- クリアボタンは、テーブルの測定値をクリアし、結果を拭きます。
検査されたウィンドウをリロード- このボタンは、検査されたウィンドウをリロードし、新しいメジャーを表示します。
保留中のイベント- これは、保留中の測定値を示します（パフォーマンスデータの反応データ）。
このセクションでは、フェーズのコンポーネントが取る時間、コンポーネントのインスタンスの数、およびMSと％のすべてのフェーズを組み合わせた合計時間を示します。
以下に、Reactがパフォーマンスを測定するさまざまなフェーズを示します。
Reactツリーの調整- このフェーズでは、Reactはルートノードをレンダリングし、進行中の作業を作成します。調整中にいくつかのカスケード更新があった場合、アクティブな測定値を一時停止し、繰延ループでそれらを再開します。これは、トップレベルの更新が以前のレンダリングを中断したときに発生します。レンダリングフェーズ中にエラーがスローされた場合、最も近いエラー境界を見つけることによりエラーをキャプチャします。または、エラー境界がない場合はルートを使用します。
コミット変更- このフェーズでは、完了した作業がコミットされます。また、ルートノードに副作用があるかどうかをチェックします。効果がある場合は、リストに追加します（このリストデータ構造をこちらをご覧ください）か、ツリー内のすべての副作用をコミットします。現在のコミットにスケジュールされた更新がある場合、ライフサイクルフックでのカスケードアップデートについて警告が発生します。コミットフェーズでは、現在のコミットで更新がスケジュールされます。また、フェーズ/ステージがComponentWillMountまたはComponentWillReceivePropsでない場合、更新がスケジュールされます。
ホスト効果をコミット- 新しいツリーが挿入されるたびにホスト効果がコミットされます。スケジュールされる新しいアップデートごとに、ホストの合計効果が計算されます。このプロセスは2つのフェーズで行われ、最初のフェーズはすべてのホストノード挿入、削除、更新、refのアンマウントを実行し、他のフェーズはすべてのライフサイクルとrefコールバックを実行します。
ライフサイクルをコミット- ホスト効果をコミットしながら最初のパスが完了したとき、進行中の作業は現在のツリーになりました。したがって、 componentdidmount/updateで進行中の作業は最新です。このフェーズでは、すべてのライフサイクルとREFコールバックがコミットされています。ライフサイクルをコミットすると、別のパスとして発生するため、ツリー全体のすべての配置、更新、削除がすでに呼び出されています。
このDevToolの以前のバージョンでは、イベントタイプをリッスンする代わりに、パフォーマンスメトリックが質問されていました。これには、これらのメトリックがこのツールによってキャプチャできるように、 react-domパッケージ（ react-dom.development.js ）内のラインにコメントする必要があります。
しかし、パフォーマンスオブザーバーAPIの助けを借りて、オブザーバーを登録して、特定のタイプのイベントを聞いてエントリ（パフォーマンス測定）を取得できます。 react-perf-devtool 、パフォーマンスオブザーバーの上にAPIを提供します。これは、オブザーバーを登録する関数です。
const { registerObserver } = require ( 'react-perf-devtool' )
// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( )このオブザーバーは、React Performance測定イベントに耳を傾けます。 eval（）を使用して、検査されたウィンドウ内でアクセスできるウィンドウオブジェクトへの反応コンポーネントのイベントとパフォーマンス測定に関する情報を含むオブジェクトをフックします。
再レンダリングごとに、このオブジェクトは新しいメジャーとイベントカウントで更新されます。拡張機能は、メモリとキャッシュのクリアを整理します。
optionオブジェクトとオプションのcallback 、 registerObserverに渡すこともできます。 optionオブジェクトは、パフォーマンス測定をコンソールにログに記録する場合に役立ちます。 callback 、分析に使用できる引数として解析された集計結果（メトリック）を受け取ります。
結果を計算して集約すると、アプリフレーム内で発生し、devtoolではなく発生します。独自の利点があります。
寄稿ガイドを読んでください
mit
