URLを入力してページの読み込みが完了し、ページが表示されるまでのプロセスはどうなるのでしょうか？

アドレスバーのURLの操作方法に応じてリソースをロードし、データを取得するにはさまざまな方法があります。以下の詳細なプロセスは「アドレスバーにURLを入力し、Enterキーを押してリソースをロードする」場合です。 操作方法が分析され、他の方法のプロセスも同様です。違いは後で分析されます。

1. ブラウザは、このリクエストを処理するためにスレッドを開きます。URL が http プロトコルであると判断された場合、 に従って処理されます。

2.

ブラウザはまずブラウザキャッシュ-システムキャッシュ-ルーターキャッシュをチェックします。キャッシュにキャッシュがある場合、ページのコンテンツは画面に直接表示されます（サーバーへのリクエストは行われません）。この時）。そうでない場合は、次のステップに進みます (後でサーバーにリクエストを送信する必要があります) 3. DNS解決を通じてウェブサイトのIPアドレスを取得します 4. 実際のIPアドレスサーバーへの

tcp接続を開始し、ブラウザとの

tcpスリーウェイハンドシェイクを確立します。 5. ハンドシェイクが成功すると、

HTTP

プロトコルセッションが実行され、ブラウザはヘッダー(Request header);

を送信します。 6. Apache、Tomcat、Node.JS、その他のサーバーなどのweb

サーバー上のWebサーバーを入力します。 7. デプロイされたバックエンドアプリケーション（PHP、Java、JavaScript、Pythonなど）を入力し、対応するリクエスト処理を見つけます;

8 終了フィードバックヘッダーを処理し、データをブラウザに返します;。 9。ブラウザは

html

ドキュメント(レスポンスヘッダー、ステータスコード200)のダウンロードを開始し、キャッシュ;

を設定します。 10. 次に、ブラウザは HTML 構造全体を解析して DOM ツリーを形成します。同時に、対応する CSS ファイルを解析して CSS ツリー (CSSOM) を形成する必要もあります。 次に、DOM + CSSOM

を組み合わせてレンダリングツリー(Render Tree

)を形成する必要があります; 11. ツリーを描画した後、ページ上の各ノードの位置を計算する必要があります。このプロセスはレイアウトと呼ばれます。 12. レイアウトプロセスは連続的な二次元平面上で実行されます。次に、これらの結果をラスタライズして画面の離散的な二次元平面にマッピングする必要があります。このプロセス

。 このプロセスはペイントと呼ばれます; パフォーマンスを向上させるために、最新のブラウザーはページを複数のレイヤーに分割し、それぞれをペイントしてから1つのページに結合します(複合レイヤー)。

PS、ただしキャッシュの処理にはいくつかの違いがあります:

1. 「移動」するか、アドレスバーで Enter キーを押して更新します: 上記を参照してください

2. F5 リフレッシュ: ステップ 2 はなく、戻り値はステップ 8 で判断されます。304 が返された場合は、 にキャッシュがあることを意味し、この時点では キャッシュが直接使用されます。 が 200 を返した場合、それは キャッシュなし、最後まで順次実行 を意味します

3. Web ページを更新するための Ctrl+F5 の違い: ステップ 2 はなく、 ステップ 8 で 200 を返し、最後まで順番に実行する必要があります

(上記の 3 つの異なる方法については、理解しやすくするために、http プロトコルのキャッシュ機構と区別することをお勧めします。ここでは、「サーバーにリクエストを送信し、そのリクエストを送信する」ことに重点を置きます。戻り値」を区別します)

PS