☰

ブラウザはどのくらいのページが読み込まれたかをどのように知るのでしょうか?

tag-icon • tag-icon firefox browser progress
ブラウザはどのくらいのページが読み込まれたかをどのように知るのでしょうか?

ウェブページの読み込み中に、ブラウザの進行状況バーが終わりに近づくにつれて遅くなることがあるのを見て、ブラウザが進行状況を表示しているのはサイズページ上に存在する要素またはいいえ。要素か何か他のものですか?

Firefox や他のブラウザのソースを確認したことがある人なら、このことについてもう少し詳しく知っているのではないでしょうか?

答え1

何はウェブサイトを読み込んでいますか?

ウェブページを読み込み中は多かれ少なかれ、ファイルのダウンロードに似ています。サーバーから取得するのは、ほとんどの場合、HTTP 経由で転送された HTML ファイルだけです。まず、サイトの URL に対して HTTP リクエストを送信します (例: ) GET http://superuser.com。

ウィリアム・ジャクソンが言ったように、HTTPはContent-Lengthヘッダー フィールドには、そのファイルのサイズが事前に表示されます。これは、ブラウザがサイト全体のダウンロードがどの程度進んでいるかを推測するために評価できるものです。

ただし、これは HTML ファイルが参照して読み込むことができるすべてのリソースを網羅しているわけではありません。これには次のものが含まれます。

  • 外部画像
  • 外部スタイルシート
  • 外部スクリプト
  • フレーム
  • AJAXの読み込み

ブラウザはどのくらい読み込むべきかをどうやって知るのでしょうか?

これらの参照を見つけて要求するのもブラウザの役割です。そのため、外部参照ごとに、ブラウザはキャッシュを参照するか、新しい HTTP 要求を送信します。Super User の場合、パフォーマンスを高速化するためにコンテンツ配信ネットワークでホストされている次のファイルになります。

  • GET http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js– メインのjQueryファイル
  • GET http://cdn.sstatic.net/js/stub.js– いくつかのJS関数
  • GET http://cdn.sstatic.net/superuser/all.css– スタイルシート
  • ...

タイムライン トラッキングを有効にすると、Firebug または Chrome のデバッガーを使用してこれを実際に確認できます。これは、リクエストのみが表示されるようにフィルターされた、Super User の読み込みのタイムラインです。クリックして拡大:

ここに画像の説明を入力してください

ご覧のとおり、メインのスーパー ユーザー サイトの読み込みに最も時間がかかりますが、そこから連鎖的に他のページの読み込み (HTTP 要求やキャッシュ要求など) も発生します。これらすべての も公開されるContent-Lengthため、ブラウザーはこれらすべてのファイルを読み込むのにかかる時間を正確に推測できます。

そして、これらすべてが非常に短い時間枠内で行われるため、進行状況バーの小さな不規則性に気付くことはありません。進行状況バーが 3 分の 2 のところで停止することがあります。これは、ブラウザーが他のブラウザーと同じ速さで外部リソースを読み込むことができない場合に発生する可能性があります。

ブラウザはこれをどのように実装するのでしょうか?

グーグルクローム

Google Chrome（別名Chromium）のソースを調べたところ、進捗状況トラッカー.cpp実際には、これはAppleによって書かれたものなので、おそらくウェブキットレンダリング エンジン。次のフィールドが含まれます。

ProgressTracker::ProgressTracker()
    : m_totalPageAndResourceBytesToLoad(0)
    , m_totalBytesReceived(0)

したがって、前述したように、リソース バイトの合計数が識別され、それに応じて進行状況が変更されます。最初に読み込まれたページの実際の重要性がどのように高められるかを示す興味深いコメントがあります。

// WebCore のレイアウト システムを使用するドキュメントの場合、最初のレイアウトを中間点として扱います。

したがって、最初のページが読み込まれている場合（外部リソースがまだ読み込まれていない場合）、進行状況は 50% になります。

Firefox (Fission アドオン)

さて、もう少し簡単な指標もあります。私は調べてみました核分裂、Firefox のプログレスバー拡張機能。私が間違って読んでいなければ、簡単に思いつくような機能です。

すべてのウェブサイトは、DOM要素最初の HTML サイトを解析することで、ロードされる DOM 要素の合計数を推定できます。

読み込まれた DOM 要素ごとにカウンターを増やし、それに応じて進行状況バーを表示します。

答え2

ブラウザがサーバーにファイルをリクエストする際、サーバーはファイルのサイズを事前にブラウザに伝えるオプションを持っています。サーバーはこれを実行するため、コンテンツ長ヘッダー。

他にも情報がありますブラウザがダウンロードするファイルのサイズを判断する方法。

関連情報