はじめに

新卒エンジニアが会社の研修で勉強した内容を図でまとめてみました。

Webページのアクセスから表示までの流れ

URLの入力:
ユーザーがブラウザにURL（例：https://www.amazon.com ）を入力

DNSキャッシュの確認:

DNSサーバーへの問い合わせ:

IPアドレスの取得完了:
取得したIPアドレスを使ってWebサーバーへの接続準備完了

TCP接続確立（3ウェイハンドシェイク）:

データ転送:

コネクション切断（4ウェイハンドシェイク）:

リクエスト受付:

動的コンテンツ生成:

データベース処理:

レスポンス生成:

HTMLパース:
ブラウザがHTMLを受信し、DOM（Document Object Model）ツリーを構築

CSSパース:
CSSを解析し、CSSOM（CSS Object Model）を構築
スタイル情報をDOM要素に適用

JavaScriptの実行:
JavaScriptコードを実行してDOMやCSSOMを操作

レンダリングツリー構築:
DOMとCSSOMから実際に表示する要素のレンダリングツリーを作成

レイアウト処理:
各要素の位置やサイズを計算

ペイント処理:
色や画像などの視覚的要素を描画

コンポジット:
複数のレイヤーを合成して最終的な画面を生成

Webページ表示完了:
ユーザーに完成したWebページが表示される