ブラウザがフォーマットされていないページをレンダリングするとき、舞台裏では何が起こっているのでしょうか?

ブラウザがフォーマットされていないページをレンダリングするとき、舞台裏では何が起こっているのでしょうか?

たとえば、Facebook が読み込まれると、グラフィックはほとんど表示されず、ページの左側にデフォルトで青い色のリンクが多数表示されます。

インターネット接続に問題があるように思える場合もあれば、そのサイトだけに問題があるように思える場合もあります。問題の詳しい説明を聞きたいです。

答え1

通常、これはメインの HTML ページに CSS スタイルシートへのリンクが含まれており、それが (何らかの理由で) 読み込まれなかったことを意味します。スタイルシートが利用できないため、ブラウザーはデフォルトのスタイルを使用してページをレンダリングします (そのため、CSS で指定された位置情報、背景グラフィック、リンクの色などが失われます)。特に、多くの最新の Web サイトは CSS を使用して<div>画面上にリンクを配置するため、CSS がない場合、ナビゲーション リンクはデフォルトの位置 (左揃え、ページの下方向) に表示されます。

考えられる原因:

  • 不安定なネットワーク接続 (例: メイン ページの読み込み後にリソースのダウンロードがタイムアウトする)
  • インターネット接続が失われ、メインの HTML ページがキャッシュに残る
  • HTML ページが読み込まれた後、リソースが読み込まれる前にページの読み込みをキャンセルしました
  • サーバーは空の応答を返しました (ローカル ネットワーク接続の不良、プロキシの不良、または一時的なサーバーの不具合が原因の可能性があります)。

    特によくあるケースとしては、HTML ページが 1 つの Web サイトまたはドメインでホストされていて、リンクされているリソースのほとんどが別のドメインにある場合が挙げられます。たとえば、スーパー ユーザー ( superuser.com) は、 のスタイルシートと UI 画像 (投票矢印など) cdn.sstatic.net、 のユーザー アバターwww.gravatar.com、 のコンテンツ画像を参照しますstack.imgur.com。 がsstatic.net一時的にダウンしているのに が起動したままになっている場合はsuperuser.com、説明されているのと同じような効果が得られます。

このページには「ほとんどグラフィックがない」と書かれています。そのウェブサイトでは、CSS を使用してグラフィックのほとんどを背景画像として指定している可能性があります。それよりも可能性が高いのは、ページによってリンクされているリソースのほとんど (スタイルシートや画像を含む) が読み込まれていないことです。その結果、説明されている両方の問題 (書式の消失と画像の消失) が発生します。

読み込まれる画像は、サーバーまたはプロキシの不具合の影響を受けないか (画像は多くの場合、メインの Web ページとは異なるサーバーまたはドメインでホストされています)、または既にブラウザーのキャッシュ内にあるか (そのため、ブラウザーは画像を取得しようとせず、エラーを回避します) のいずれかです。

関連情報