フロントエンド開発エンジニアは、次の 3 つのパフォーマンス指標に注意を払う必要があります。

資格のあるフロントエンド開発エンジニアとして、注意を払う必要があるいくつかのパフォーマンス指標をご存知ですか?今日はフロントエンドエンジニアとして注目すべき3つの指標をわかりやすくご紹介します

1. ページの応答時間については、有名な「2-5-8原則」があります。ユーザーがページにアクセスしたとき:

応答が 2 秒以内に受信される場合、システムは応答が非常に速いと感じます

応答が 2 ～ 5 秒の場合、システムの応答速度は問題ありません。

応答が 5 の場合、8 秒以内に応答が受信されると、システムは応答速度が非常に遅いと感じますが、許容範囲内です。

8 秒を超えても応答が受信されない場合、ユーザーはシステムがひどいと感じ、サイトを離れるか、2 番目のリクエストを開始するかを選択します。

Web サイトがユーザーを獲得したい場合、Web サイトの速度と安定性が最優先事項です。

さまざまなフロントエンド監視プラットフォームから、ページの多くのパフォーマンス指標を取得できます。この記事では、いくつかの重要な指標を紹介し、対応する最適化のアイデアを示します。

2. レンダリング開始時間

この時点は、ブラウザがページの描画を開始することを示し、その前にページが白い画面になるため、白い画面時間とも呼ばれます。

この時点は、レンダリング開始までの時間 = TTFB (最初のバイトまでの時間) + TTDD (

ドキュメントのダウンロードまでの時間) + TTHE (ヘッドエンドまでの時間) という式で表すことができます。このうち、TTFB はブラウザーがリクエストを開始してサーバーが最初のバイトを返すまでの時間を表し、TTDD はサーバーから HTML ドキュメントをロードする時間を表し、TTHE はドキュメントヘッダーの解析を完了するのに必要な時間を表します。高度なブラウザには、この時点のポイントを取得するための対応する 属性 があります。 Chrome は chrome.loadTimes().firstPaintTime で取得でき、IE9+ は Performance.timing.msFirstPaint で取得できます。サポートされていないブラウザでは、上記の式に従ってヘッダー リソースが読み込まれる瞬間を取得することで、おおよその値をシミュレートできます。 。レンダリング時間の開始が速くなると、ユーザーはより速くページを表示できるようになります。

現時点での最適化には次のものが含まれます:

1) サーバーの応答時間、サーバー側の出力をできるだけ早く最適化します

2) HTML ファイルのサイズを削減します

3) ヘッダーのリソースを削減し、本文にスクリプトを配置するようにします

DOM Ready

この時点では、DOM 解析が完了しており、リソースがロードされていないことを示します。この時点で、ユーザーによるページの操作はすでに可能です。これは、TimeTo Dom Ready = TTSR(Time To Start Render) + TTDC(Time To Dom Created) + TTST(Time To Script) という式で表すことができます。 TTSR は上で紹介しましたが、TTDC は DOM ツリーの作成にかかる時間を表します。 TTST は、BODY 内のすべての

static スクリプトの読み込み時間と実行時間を表します。高度なブラウザーには、これに対応する DOMContentLoaded イベント があります。DOMContentLoaded イベントを説明する MDN のドキュメントは次のとおりです。

DOMContentLoaded イベントは、スタイルシート、画像、 (load イベントを使用して、完全にロードされたページを検出できます)。詳細な仕様については、W3C の HTML5 仕様を参照できます。 MDN ドキュメントから、このイベントは主に DOM ドキュメントの読み込みと解析の完了を参照していることがわかります。非常に単純に見えますが、DOMContentLoaded イベントのトリガーは CSS と JS に密接に関連しています。クリティカル レンダリング パス (クリティカル レンダリング パス) という用語を使用して説明します。DOMContentLoaded に対するクリティカル レンダリング パスの影響については、記事 [クリティカル レンダリング パス] で詳しく説明されています。

DOMContentLoaded イベントをサポートしていないブラウザでは、シミュレーションを通じて近似値を取得できます。主なシミュレーション方法は次のとおりです:

1) 低バージョンの Webkit カーネル ブラウザは document.readyState をポーリングすることでこれを実現できます

2) IE では、実装に使用できるようになるまで、setTimeout を通じて documentElement の doScroll メソッドを継続的に呼び出すことができます

具体的な実装方法は、主流のフレームワーク (jquery など) の実装を参照できます。 DOM Ready 時点は、ユーザーがページを操作できることを意味するため、この時点での最適化には以下が含まれます:

1) ノードをできるだけ少なくし、DOM 構造の複雑さを軽減します。ネストが深すぎます

2) キーのプレゼンテーション パスを最適化します

3. 最初の画面時間

この時間ポイントは、ユーザーが最初の画面ページを表示した時間を表しますが、一般的には取得が困難です。 、近似値はシミュレーション時間を通じてのみ取得できます。一般的なシミュレーション方法は次のとおりです:

1) スクリーンショットを継続的に取得し、スクリーンショットが変化しなくなったら、それを最初のスクリーン時間とみなすことができます。 webPagetest の Speed Index アルゴリズムを参照できます。2) 一般に、最初の画面に影響を与える主な要素は、ページが読み込まれた後、画像が最初の画面にあるかどうかを判断します。 , そして、表示するのに最も遅い読み込み時間を見つけます。もちろん、その他の詳細についても考慮する必要があります。詳細については、「7 日間でフロントエンドのパフォーマンス監視システムを構築する」を参照してください。

1) の最初の画面の表示。ページは js コードに依存すべきではなく、js は実行後またはロード後にできるだけ domReady に配置する必要があります

。

2) 最初の画面外の画像の遅延読み込み

3) 最初の画面の構造はできるだけシンプルにし、最初の画面外の CSS は遅延読み込みできるようにする

onload

この時点はwindow.onload イベントがトリガーされ、元のドキュメントと参照されたすべてのコンテンツがロードされたことを表します。ユーザーにとって最も明白な感覚は、ブラウザー タブのロード状態が終了したことです。

現時点での最適化方法は、

1) リソースリクエスト数とファイルサイズを削減する

2) onLoad の後に非初期化スクリプトを配置して実行する

3) 必要のないスクリプトを非同期ロードする同期

Web サイト全体のパフォーマンスを最適化するには、ページをオンロードするときにプリロードを実行し、他のページが使用する必要があるリソースをプリロードすることを検討できます。

上記の記事を読んで、フロントエンド開発の旅に役立つことを願っています。

関連書籍:

フロントエンド JS の面接での質問

実践的な Web フロントエンド JS および UI フレームワークの紹介

Web フロントエンドの知識体系のまとめ

以上がフロントエンド開発エンジニアは、次の 3 つのパフォーマンス指標に注意を払う必要があります。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。