資格のあるフロントエンド開発エンジニアとして、注意を払う必要があるいくつかのパフォーマンス指標をご存知ですか?今日はフロントエンドエンジニアとして注目すべき3つの指標をわかりやすくご紹介します
1. ページの応答時間については、有名な「2-5-8原則」があります。ユーザーがページにアクセスしたとき:
応答が 2 秒以内に受信される場合、システムは応答が非常に速いと感じます
応答が 2 ~ 5 秒の場合、システムの応答速度は問題ありません。
応答が 5 の場合、8 秒以内に応答が受信されると、システムは応答速度が非常に遅いと感じますが、許容範囲内です。 8 秒を超えても応答が受信されない場合、ユーザーはシステムがひどいと感じ、サイトを離れるか、2 番目のリクエストを開始するかを選択します。 Web サイトがユーザーを獲得したい場合、Web サイトの速度と安定性が最優先事項です。 さまざまなフロントエンド監視プラットフォームから、ページの多くのパフォーマンス指標を取得できます。この記事では、いくつかの重要な指標を紹介し、対応する最適化のアイデアを示します。 2. レンダリング開始時間ドキュメントのダウンロードまでの時間) + TTHE (ヘッドエンドまでの時間) という式で表すことができます。このうち、TTFB はブラウザーがリクエストを開始してサーバーが最初のバイトを返すまでの時間を表し、TTDD はサーバーから HTML ドキュメントをロードする時間を表し、TTHE はドキュメントヘッダーの解析を完了するのに必要な時間を表します。高度なブラウザには、この時点のポイントを取得するための対応する 属性 があります。 Chrome は chrome.loadTimes().firstPaintTime で取得でき、IE9+ は Performance.timing.msFirstPaint で取得できます。サポートされていないブラウザでは、上記の式に従ってヘッダー リソースが読み込まれる瞬間を取得することで、おおよその値をシミュレートできます。 。レンダリング時間の開始が速くなると、ユーザーはより速くページを表示できるようになります。
現時点での最適化には次のものが含まれます: 1) サーバーの応答時間、サーバー側の出力をできるだけ早く最適化します 2) HTML ファイルのサイズを削減します 3) ヘッダーのリソースを削減し、本文にスクリプトを配置するようにしますDOM Readystatic スクリプトの読み込み時間と実行時間を表します。高度なブラウザーには、これに対応する DOMContentLoaded イベント があります。DOMContentLoaded イベントを説明する MDN のドキュメントは次のとおりです。
DOMContentLoaded イベントは、スタイルシート、画像、 (load イベントを使用して、完全にロードされたページを検出できます)。詳細な仕様については、W3C の HTML5 仕様を参照できます。 MDN ドキュメントから、このイベントは主に DOM ドキュメントの読み込みと解析の完了を参照していることがわかります。非常に単純に見えますが、DOMContentLoaded イベントのトリガーは CSS と JS に密接に関連しています。クリティカル レンダリング パス (クリティカル レンダリング パス) という用語を使用して説明します。DOMContentLoaded に対するクリティカル レンダリング パスの影響については、記事 [クリティカル レンダリング パス] で詳しく説明されています。 DOMContentLoaded イベントをサポートしていないブラウザでは、シミュレーションを通じて近似値を取得できます。主なシミュレーション方法は次のとおりです:1) 低バージョンの Webkit カーネル ブラウザは document.readyState をポーリングすることでこれを実現できます
2) キーのプレゼンテーション パスを最適化します3. 最初の画面時間
この時間ポイントは、ユーザーが最初の画面ページを表示した時間を表しますが、一般的には取得が困難です。 、近似値はシミュレーション時間を通じてのみ取得できます。一般的なシミュレーション方法は次のとおりです:
。
2) 最初の画面外の画像の遅延読み込み
3) 最初の画面の構造はできるだけシンプルにし、最初の画面外の CSS は遅延読み込みできるようにする
onload
この時点はwindow.onload イベントがトリガーされ、元のドキュメントと参照されたすべてのコンテンツがロードされたことを表します。ユーザーにとって最も明白な感覚は、ブラウザー タブのロード状態が終了したことです。
現時点での最適化方法は、
1) リソースリクエスト数とファイルサイズを削減する
2) onLoad の後に非初期化スクリプトを配置して実行する
3) 必要のないスクリプトを非同期ロードする同期
Web サイト全体のパフォーマンスを最適化するには、ページをオンロードするときにプリロードを実行し、他のページが使用する必要があるリソースをプリロードすることを検討できます。
上記の記事を読んで、フロントエンド開発の旅に役立つことを願っています。
関連書籍:
実践的な Web フロントエンド JS および UI フレームワークの紹介
以上がフロントエンド開発エンジニアは、次の 3 つのパフォーマンス指標に注意を払う必要があります。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。