ブラウザーにWebページをロードするのに必要なすべてを考えたことはありますか？ インターネット接続に応じて、WebページのURLまたはアドレスを入力して[Enter]ボタンを押すと、ほぼ瞬時にそのWebページに移動します。 接続が遅い場合はプロセスが遅くなる可能性がありますが、それでも比較的高速でページにアクセスできます。 それをすべて実現するために、舞台裏で何が起こっているのでしょうか？ 以下に従ってください。何が起こっているのかをお見せします！
サーバーからブラウザーへの通信
素人の言葉では、アドレスバーにリンクを入力するか、ページ上のリンクをクリックすると、ブラウザーはアドレスがホストされているサーバーにリクエストを行います。 そこから、ページのリソースがダウンロードされ、ブラウザはそれらのリソースを使用してページをレンダリングし、最終製品を表示します。
ただし、それよりも少し複雑です。
URLの簡単な説明
www.google.comなどのURLを入力すると、それが表示されます。 コンピューターは他の何かを見ます。 入力してEnterキーを押すと、ドメインネームサーバー（DNS）を経由してIPアドレスに変換されます。これはコンピューターが読み取れるものです。 そのため、www.google.comが表示されている場合でも、ブラウザがそれを取得し、DNSサーバーを介して渡し、実際に216.58.216.110などのGoogleの多数のIPアドレスの1つに接続しています。 実際にアドレスバーに216.58.216.110と入力して、同じ場所に配置できます。
ブラウザでWebページを取得する
ブラウザにWebページを適切に表示するには、多くの可動部分があります。 ただし、最初のステップはリクエストです。 www.techjunkie.comなど、訪問したいサイトのアドレスを入力すると、Webサーバーにリクエストを送信します。 Enterキーを押すと、ブラウザーがWebホストに接続し、ダウンロードするテキストファイルの束を要求します。
次のステップは、Webサーバーの応答です。 これは、サーバーが実際にブラウザにリソースを提供するステップです。 ブラウザーはそれらを要求し（要求）、サーバーはそれらを送信します（応答）。 しかし、ブラウザは、単一のファイル以上のものが必要かどうかをどのように知るのでしょうか？ これは、解析と呼ばれるものを介して行われます。 つまり、ブラウザは最初のドキュメントを取得し、他のファイルへの参照を探します。 別のファイルへの参照が見つかると、それもダウンロードします。 それよりもずっと複雑ですが、必要なファイルを すべて 見つける方法の要点です。
次に、ダウンロードしたすべての情報を構築する必要があります。 ダウンロードした元のHTMLドキュメントと関連するすべてのリソースを受け取り、一種の構造またはツリーを作成します。 最初にドキュメントオブジェクトマップ（DOM）を構築します。これは基本的に、ページ上の要素の構造または配置です。 次に、CSSオブジェクトマップを構築します。これは、DOMの要素のスタイルを設定するための構造です。 最後に、Render Treeを作成します。これは基本的にDOMとCSS Object Mapを受け取り、それらを組み合わせて、ページの構造とスタイルの構造を作成します。
最後に、ページがレンダリングされ、ユーザーであるユーザーに表示されます。 また、ブラウザは画面に対するレイアウトの大きさを確認する必要があるため、このステップには多くの計算があります（たとえば、タブレット、スマートフォン、コンピューターの場合、ページサイズは異なります）。 しかし、それが完了すると、ブラウザに最終的な、できれば見栄えの良いページが表示されます。
このプロセスは実に驚くべきものです。インターネット接続の速度にもよりますが、これらの要求と計算はすべて数秒で発生します。 しかし、ほとんどの場合、Webページには何百ものファイルが存在する可能性がありますが、上記のプロセスは10秒以内に簡単に起こります。
閉鎖
インターネット接続、ブラウザ、サーバーがどのように連携してWebページを直接ブラウザに配信するかを明確に説明していただければ幸いです。 これらすべてのテクノロジーがどのように絡み合って連携するかをより深く理解することで、舞台裏で何が起こっているかをよりよく理解できるだけでなく、ブラウザー関連の問題のトラブルシューティングにも役立つ可能性があります。
