🌐

Webページが表示されるまでに何が起きているのか

2025/01/26に公開

前提

この記事では以下の前提を基に説明しています:

  • 仮想DOM(例: React)を使用してDOMを構築していること。
  • CSR(クライアントサイドレンダリング)を使用してDOMを構築していること。

また、筆者の英語学習を兼ねているため、文末に同等の内容を英文で記載しています。
つたない英語ではありますが、広い心で受け止めていただけますと幸いです。

結論

以下の図は、この記事で解説するプロセスを表しています。

流れ

1. URLアクセス

ユーザーがブラウザで https://example.com を入力すると、Webページの読み込みプロセスが開始されます。

2. DNS解決

ブラウザがドメインをIPアドレスに解決します。

まず、以下の順序でキャッシュを確認します:

  • ブラウザキャッシュ
  • OSキャッシュ
  • ISPキャッシュ

キャッシュがヒットした場合はIPアドレスを取得し、次のステップに進みます。
キャッシュがヒットしない場合、ブラウザはルートネームサーバー、次にTLDネームサーバー、そして最後に権威ネームサーバーに問い合わせを行い、IPアドレスを取得します。

3. HTTPリクエストの送信

ブラウザは取得したIPアドレスを使用してWebサーバーにHTTPリクエストを送信します。

4. リソースの取得

ブラウザはHTML、CSS、JavaScript、画像などの静的リソースを取得します。
CDNキャッシュが有効な場合、最寄りのCDNサーバーからリソースを取得します。
キャッシュがヒットしない場合、リクエストはオリジンサーバーにフォールバックし、必要なリソースを取得します。

5. リソースの読み込み

ブラウザは取得したリソースを解析し、JavaScript、CSS、画像などを読み込みます。

6. 仮想DOMの生成

ブラウザはJavaScriptファイル(例: app.js)を実行し、Reactが仮想DOM(Virtual DOM)を生成します。
また、Reactがコンポーネントを初期化し、仮想DOMの構造を構築します。

7 & 8. 初期レンダリングと画面への描画

仮想DOMを基に初期レンダリングが行われます。
プレースホルダーやローディング状態などのUI要素が仮想DOMから実際のDOMに変換され、ブラウザ画面に描画されます。

9. APIコール

多くのSPAでは、追加データを取得するためにAPIコールが必要です。
ブラウザはバックエンドAPIに非同期リクエストを送信し、レスポンスを処理します。このプロセスは仮想DOMの更新に不可欠です。

10 & 11. 再レンダリング

APIレスポンスで取得したデータを基に仮想DOMが更新されます。
Reactが差分計算を行い、変更が必要な部分のみを実際のDOMに適用します。
更新されたDOMがブラウザ画面に描画され、最終的に完全なWebページが表示されます。

Prerequisites

This article assumes the following:

  • Using Virtual DOM (e.g., React) to construct the DOM.
  • Building the DOM with CSR (Client-Side Rendering).

Summary

The following diagram illustrates the process covered in this article.

Process

1. URL Access

The user enters https://example.com in their browser, initiating the process of loading the webpage.

2. DNS Resolution

The browser resolves the domain to an IP address.

First, it checks the cache in the following order:

  • Browser cache
  • OS cache
  • ISP cache

If a cache hit occurs, the IP address is retrieved, and the process moves to the next step.
If no cache hit occurs, the browser queries the Root Name Server, followed by the TLD Name Server, and finally the Authoritative Name Server to retrieve the IP address.

3. Sending an HTTP Request

The browser uses the retrieved IP address to send an HTTP request to the web server.

4. Retrieving Resources

The browser retrieves static resources such as HTML, CSS, JavaScript, and images.
If the CDN cache is valid, the resources are retrieved from the nearest CDN server.
If there is no cache hit, the request falls back to the origin server, and the required resources are fetched.

5. Loading Resources

The browser parses the retrieved resources and loads JavaScript, CSS, images, and more.

6. Generating the Virtual DOM

The browser executes the JavaScript file (e.g., app.js), and React generates the Virtual DOM.
Additionally, React initializes the components and builds the structure of the Virtual DOM.

7 & 8. Initial Rendering and Rendering to the Screen

The initial rendering is performed based on the Virtual DOM.
UI elements, such as placeholders or loading states, are rendered from the Virtual DOM to the actual DOM and displayed on the browser screen.

9. API Calls

In most SPAs, API calls are required to fetch additional data.
The browser sends asynchronous requests to the backend API and processes the response. This step is crucial for updating the Virtual DOM.

10 & 11. Re-Rendering

The Virtual DOM is updated with the data retrieved from the API response.
React performs a diffing operation to calculate the changes and applies them to the actual DOM. The updated DOM is rendered to the screen, resulting in the final, complete webpage.

Discussion