Chrome Dev Toolsのタイムラインビューで2つのリソース間のギャップが発生するとどうなりますか？

Question

ネットワークタブのタイムラインにあるChrome Dev Toolsで次のことを教えてもらえますか？具体的には、ギャップはどういう意味ですか？このひどく遅いページのロード中に

リソースは、彼らが〜7秒程度までロードされている方法についていくつかの情報を表示します。これには大きなギャップがあります。そして13秒近くにもう一度ロードされているリソースに関する情報があります。

私はリソースの完全なリストを切り捨てましたが、ギャップにまたがる唯一のリソースバーは、プライマリページの最初のリソースです。それはそれは「コンテンツのダウンロード」（青いバー）として、ギャップに何が起こっているかを識別します。

ページ上のリソース全体のサイズは2.5メガバイトの周りにあるように思われます。この例では、DOMContentLoadedとLoadというイベントが〜13秒の近くに同時に発生しています。

Answer 1

Chromeは、ページのHTMLのダウンロードが完了する前に、画像やスクリプトなどの外部リソースの読み込みを開始します。

たとえば、ここではページの上部にイメージがあり、さらにHTMLの中央にスクリプトタグがあります。

これはまた、Chromeはすでに追加のリソースをフェッチしているため、Loadイベントは、DOMContentLoaded後すぐに次のことを意味します。

あなたのケースでは、これらのイベントのいずれかを待ってから追加のリクエストをトリガーするJavaScriptコードがあります。

最初の読み込み時間の理由は、〜4秒の待機時間の後に、ドキュメント全体を実際にダウンロードするには別の9秒かかるということです。

これは、ブラウザのインターネット接続が不良であるか、サーバーが応答を生成するのに時間がかかり、サーバーに十分な帯域幅がないためです。