パフォーマンスに関する洞察の概要
Performance Insight は Chrome Chrome DevTools (Chrome102 バージョンがリリースされています) の組み込みツールであり、以下の図に示すように、現在でも Chrome DevTool で開始できます。CPU をシミュレートし、4 倍のスローダウンを選択して開始できます。 4x 低速 CPU をシミュレートし、さまざまなネットワークのテスト要件を満たすためにネットワークをシミュレートすることもできます。
上の図にある [ページの読み込みを測定] をクリックして、現在のページのパフォーマンスの分析を開始します。
パフォーマンス分析ツールの最も便利な部分は、パネルの右端にある「分析」パネルです。レンダリングをブロックするリクエスト、長いタスク、レイアウトの変更などのイベントが、発生した順序で垂直のタイムラインの形式で表示されます。これらの特定のイベントをクリックすると、[詳細] タブに移動し、潜在的な原因やその影響を受ける要素などに関する詳細情報が表示されます。詳細では、パフォーマンスの問題に影響を与えるさまざまな要因が表示されます。残念ながら、復元計画はまだ問題を乗り越える必要があります。壁。jd ホームページを例に挙げると、累積レイアウトのシフトが遅いことが簡単にわかります (赤いボックスと赤い矢印は基準を大幅に超えているため、修正する必要があります)。さらに最適化したい場合は、 をクリックしてください。このイベントを参照して、問題の詳細な説明と特定の最適化スキームを表示します。また、ページの上部 (緑色のボックス) には、現在のページの FCP、LCP、DCL、TTI のパラメーター インジケーターが簡単に表示されます。インジケーターの意味と基準時間の詳細については、記事を参照してください。 :
この記事では、フロントエンド パフォーマンス テストに関連するコア パフォーマンス指標を理解します。
以下の図の [ビジュアル プレビューの切り替え] ボタンをクリックすると、ページ上の特定の時点で表示される UI が表示され、スクロール バーをドラッグすると、さまざまな時点での UI の読み込みの変化を簡単に確認できます。
パフォーマンスとパフォーマンスの洞察の比較
Chrome DevTools のパフォーマンスを使用してページのパフォーマンスを分析することもできますが、個人的にはこのツールは使いやすいとは言えません。以前の Performance と比較して、Performance Insight の利点は次のとおりです。
- 開発者に、より簡潔でわかりやすいページ パフォーマンス記録を提供し、メイン インターフェイス上の 2 次元からページ レンダリング プロセス全体を表示します。横軸は時間軸、縦軸はレンダリング プロセスの各段階です。
- 開発者に主要なページ パフォーマンス インジケーターの分析を提供し、ページ パフォーマンス インジケーターと欠陥をインサイト パネルに表示し、修復の提案を提供します。
- 通常の開発者にとっては、Web ページのパフォーマンスを理解するのが簡単ですが、これはまだ実験的なモジュールであり、最適化の余地がたくさんあります。
Performance Insight の使い方については、ぜひ実際に使ってみてほしいのですが、このツールの設計は非常に使いやすく、フロントエンド関連の開発やテストに携わっていた学生であれば 10 分もあれば使い始めることができると思います。
私のすべての記事は、読者が実際の仕事で遭遇する問題を解決するのに役立つことを願っています。記事が役に立った場合は、いいね、ブックマーク、転送をお願いします。皆さんの励ましが記事を更新し続ける最大のモチベーションです。