Chrome デベロッパーツールの詳細な紹介 - タイムライン

1. 概要

ユーザーは、アクセスする Web アプリケーションがインタラクティブでスムーズに実行されることを期待しています。したがって、Web 開発者としては、この点についてもより多くの時間を費やす必要があります。私たちが作成するページは、すばやく読み込まれるだけでなく、スムーズに実行される必要があります。ページのスクロールは指の動きにすばやく反応し、アニメーションとインタラクティブ効果はシルクのように滑らかである必要があります。

このように、高性能な Web サイトを作成する場合は、ブラウザーが HTML/JS/CSS を処理する方法を十分に理解して、コードが効率的であることを確認する必要があります。

2. FPSとパフォーマンス最適化の必要性

FPS は 1 秒あたりのリフレッシュレートです。現在、ほとんどのデバイスの画面のリフレッシュレートは 1 秒あたり 60 回です。ページにアニメーションやグラデーション効果がある場合、またはユーザーがページをスライドしている場合、ブラウザはアニメーションまたはページの各フレームを 16 ミリ秒以内にレンダリングする必要があります (1 秒 / 60 = 16.66 ミリ秒)。

1. ページレンダリングプロセス

しかし実際には、フレームをレンダリングしている間、ブラウザはいくつかの追加作業（レンダリングキューの管理、レンダリングスレッドと他のスレッド間の切り替えなど）を実行する必要があります。したがって、スムーズな視覚効果を実現するには、通常、単純なレンダリング作業を 10 ミリ秒以内に完了する必要があります。この時間制限を超えると、ページのレンダリングが停止し、一般にジャンクと呼ばれる状態になり、ユーザーエクスペリエンスが著しく低下します。

ページを画面上のピクセルに変換するには、通常、次の 5 つの段階を経ます。

左から右に、JS、スタイル、レイアウト、描画、レンダリングレイヤーのマージです。

a. 描画: 基本的にはピクセルを塗りつぶすプロセスです。最初のステップは、一連の描画呼び出しを作成することです。2 番目のステップは、ピクセルを塗りつぶすことです。これはラスタライズとも呼ばれます。

b レンダリングレイヤーのマージ: ブラウザーはすべてのレイヤーを適切な順序で 1 つのレイヤーにマージし、画面に表示します。

3. パフォーマンスの最適化と改善の方法

1. JavaScriptの実行効率を最適化する

1.1 アニメーション効果にはsetTimeoutやsetIntervalの使用を避け、代わりにrequestAnimationFrameを使用してください。

/**

関数 updateScreen(time) {

  // ここで視覚的な更新を行います。

}

アニメーションフレームをリクエストします(画面を更新します);

1.2 時間のかかるJavaScriptコードをWeb Workersに組み込む

1.3 DOM要素の更新を複数の小さなタスクに分割し、複数のフレームで完了する

1.4 Chrome DevToolsのタイムラインとJavaScriptプロファイラを使用してJavaScriptのパフォーマンスを分析する

2. スタイル計算の範囲と複雑さを軽減する

最悪の場合、スタイル計算の量 = 要素数 x スタイルセレクターの数になります。すべてのスタイルが一致しているかどうかを確認するには、各要素ごとに少なくとも 1 回はチェックする必要があるためです。

2.1 スタイルセレクタの複雑さを軽減する。BEMなどのクラスベースのアプローチを使用する。

2.2 スタイル計算を実行する必要がある要素の数を減らす

2.3 DevToolsを使用してタイムラインタブを選択し、左上隅にある赤い録画ボタンをクリックします。

3. 大規模で複雑なレイアウトを避ける

レイアウトとは、ブラウザが DOM 要素の形状、つまりページ内でのサイズと位置を計算するプロセスです。レイアウトにかかる時間は、主に、レイアウトする必要がある DOM 要素の数とレイアウトプロセスの複雑さによって決まります。

3.1 レイアウトのトリガーは可能な限り避けるべきである:DOM要素の幾何学的特性の変更は再レイアウトを必要とする。

4. 描画の複雑さを簡素化し、描画領域を縮小する

5. レンダーレイヤーのマージプロパティの使用とレイヤー数の制御を優先する

6. ユーザー入力時間の処理

4. Chromeコンソールツール

コンソールは開発者ツールとも呼ばれ、ブラウザに付属するデバッグツールです。現在主流のコンソールは、Firefox 用の Firebug、Chrome 開発ツール、Safari 用のデバッグツールです。

Chrome ブラウザを使用して任意の Web ページを開き、F12 キーを押すか、右クリックして「要素の検査」を選択してコンソールを開きます。この記事では、500 メインステーションを例に説明します。F12 をクリックすると、次に示すようにコンソールが表示されます。

表示できるツールは、要素、リソース、ネットワーク、ソース、タイムライン、プロファイル、監査、コンソールの 8 つあります。パネル間を移動するには、Ctrl + [ と Ctrl + ] のショートカットを使用できます。

各 Chrome モジュールとその主な機能は次のとおりです。

要素: 現在のページの HTML および CSS 要素を表示および編集するために使用されます。

ネットワーク: リクエストヘッダー、レスポンスヘッダー、返されたコンテンツなど、HTTP リクエストの詳細情報を表示するために使用されます。

ソース: 現在のページによって読み込まれたスクリプトのソースファイルを表示およびデバッグするために使用されます。

TimeLine: スクリプトの実行時間、ページ要素のレンダリング時間などの情報を表示するために使用されます。

プロファイル: CPU 実行時間やメモリ使用量などの情報を表示するために使用されます。

リソース: HTML、CSS スタイルファイルなど、現在のページで要求されたリソースファイルを表示するために使用されます。

監査: フロントエンドページの最適化、Web ページの読み込み速度の向上などに使用されます。

コンソール: スクリプトに出力されたデバッグ情報を表示したり、テストスクリプトを実行したりするために使用されます。

この記事では主にタイムラインについて述べます

タイムライン

ページに書き込まれたすべてのリソースには独自のレンダリングとペイントの結果があり、私たちの目には美しい Web ページが表示されます。しかし、帯域幅、CPU、時間などのリソースも消費します。サイクルはリソースの生成時に決定されます。リクエスト宣言サイクルの主な段階を次の図に示します。

タイムラインは、分析アプリケーションのすべてのアクティビティを記録して実行できます。ページのインタラクションを記録するには、タイムラインパネルを開いて記録ボタン ( ) を押して記録を開始するか、キーボードショートカットの Cmd + E (Mac) または Ctrl + E (Windows/Linux) を入力します。録画ボタンが灰色から赤に変わり、タイムラインがページからタイムラインの取得を開始します。アプリでいくつかの操作を完了し、データを記録した後、もう一度ボタンをクリックして記録を停止します。

注意:新しいセッションを開始できるように、既存の記録セッションはクリアされます。 V8 にガベージコレクションのラウンドを強制的に完了させます。これはデバッグに役立ちます。表示される詳細は、完了までに15ミリ秒以上かかったレコードのみを表示するようにフィルタリングされます。

まず、タイムラインのメインディレクトリを見てみましょう。

その横の赤い点はクリアな記録です。キャプチャする必要がある項目を選択するには、次のオプションを使用できます。ネットワーク、JS の紹介、スクリーンショット、ストレージ、説明です。

表示モードには、左側のフレームモードと右側のイベントモードの 2 つがあります。フレームモードでは、各フレーム生成の内部詳細を詳細に表示できます。イベントパターンにより、パフォーマンスに影響を与えるコスト要因の優先順位を可視化できます。

次の図は、オプションの Web ページを開くタイムラインです。

最初のボックスは概要で、ページのパフォーマンスを大まかに確認できます。

2 番目のボックスはイベント、つまりイベント監視です。以下は CPU のスタックトレースの視覚化です。緑はメディア時間、赤はロードイベント、青は DOM イベントを表します。

3番目のボックスはストレージを示します

4 番目のボックスは詳細で、イベントの詳細情報が表示されます。

このモードでは、概要ビュー (タイムラインの上部) に、ページ内のネットワークと HTML 解析 (青)、JavaScript (黄色)、スタイルの再計算とレイアウト (紫)、およびペイントと合成 (緑) のイベントを表す水平バーが表示されます。再描画は、ウィンドウのサイズ変更やスクロールなどの視覚的な変更に応じて呼び出されるブラウザイベントです。

概要ビューの下には詳細ビューがあり、セッションが記録された後の関連カテゴリのレコードの詳細が表示されます。