javascript - chrome devtool タイムライン フレームの輪郭が四角形であるとはどういう意味ですか?

Question

(クリックすると大きくなります)

青 - ローディング、黄 - スクリプト、紫 - レンダリング、緑 - ペイント

しかし、白抜きの長方形がたくさんありますが、それは何ですか?

Answer 1

@leiyonglin

Google Chrome の開発者は、フレーム負荷の標準メトリックを定義しています。その 60 フレーム/秒は、常識的には 60 Hz の画面リフレッシュ レートと一致します。したがって、フレームには約 1/60 秒かかります。16ミリ秒。各垂直バーはフレームを表し、ページが十分に反応するためには、水平バーとして表示される特定の time-limit 内にある必要があります。各フレームには、スクリプティング、ペイント、ロードなど、複数の処理が含まれる場合があります。ロード手段 - 画像転送のような N/w リクエスト (url) ...したがって、輪郭を描かれた四角形は、これらのプロセスを統計的に表しています (青 - ロード、黄 - スクリプト、紫 - レンダリング、緑 - ペイント)。長方形の無色の部分は、ブラウザー (GPU/CPU) がフレーム全体を処理するのにかかる時間を示します。詳細については、次のリンクを参照してください。
https://developers.google.com/events/io/sessions/gooio2012/209/

1 フレームのスクリーン ショットと分析を参照してください

この 1 フレームのショーでは、2 つのペイント ジョブと 13.917 ミリ秒にわたる 1 つの JS イベントがあります。言及されたすべてのイベント (ロード、ペイントなど) が照合され、残りの時間はブラウザ、CPU/GPU によって処理されます。