Reactガイドを読んでいくその70

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

パフォーマンス最適化

Chrome のパフォーマンスタブでコンポーネントをプロファイルする

開発モードであればブラウザの解析ツールでコンポーネントの様子を可視化することができる。
gyazo.com

例えばChromeでは以下のような手順で実行可能
・React DevTools を含むすべての Chrome 拡張機能を無効にする
 影響を少なくするため正確に計測するためには必要な手順。
・アプリケーションが開発モードであること
Chrome DevToolsのパフォーマンスタブでRecordを押す(20秒以内でないとハングアップするんだとか)
・記録を停止するとReactイベントがUserTimingラベルの下にグループ化される

詳細はこれが詳しいらしい。
building.calibreapp.com

プロファイルはあくまでも相対的なもので、コンポーネントは本番環境ではより速くレンダーされる点注意が必要。
開発環境と本番環境は異なることは意識しておく必要があるということだと思う。
無駄な処理を見つけたりするには役立つのかなという理解をした。

現時点では、Chrome、Edge、そして IE のみらしい。
基本的にこのプロファイル機能はブラウザ側が対応するかどうかにゆだねているようだ。

今日はここまで。