ブラウザーがウェブサイトを読み込む仕組み

• HTML ファイル。
• CSS ファイル。
• JavaScript ファイル。
• 画像、動画、音声ファイル、PDF、SVG などのメディア資産。
• 他にも、ブラウザーがネイティブで処理することができず、端末上の関連アプリに処理を委ねるファイルの種類があります。例えば、 Word 文書や PowerPoint のスライドデッキなどです。

ダウンロードするコードファイルの中には、静的な（ダウンロードされたのと同じフォームでサーバー上に存在する）ものもあれば、動的な（サーバーによってさまざまなデータに基づいて生成される）ものもあります。

• ウェブページがリクエストされます（リンクをクリックするなど）。
• DNSルックアップが実行され、ウェブページでダウンロードするすべての資産の場所を探します。
• 資産の取得を始めます。これには、 TCP ハンドシェイク、 TLS 交渉、 HTTP リクエスト、レスポンスが含まれます。
• DOM ツリーがダウンロードされた HTML から組み立てられます。
• CSSOM が CSS ルールから構築されます。
• JavaScript が構文解析され、解釈され、コンパイルされ、実行されます。
• アクセシビリティツリーが、支援技術（スクリーンリーダーなど）が内側へアクセスできるように構築されます。
• レンダリングツリーが、各 DOM ノードに適用された視覚スタイルを特定するために、DOM と CSSOM から作成されます。
• ページレイアウトが計算されます。
• スタイル設定およびレイアウトされたノードが、正しい順序で画面へ描画され、描画と合成が行われます。

ブラウザーは時に敵対的なプログラミング環境と見なされるのはどうしてでしょうか。

• 他にもプログラミング環境はありますが、コードが動作する環境について保証することは、はるかに困難です。
• ユーザーの OS、ブラウザー、言語、ロケーション、ネットワーク接続、CPU、GPU、メモリーなどを保証することはできません。
• 不確実性を理解し、安全策を講じたプログラミングを学ぶ必要があります。これは、ウェブ標準モデルで説明されている最善の手法に従うことに依存しています。また、エラー処理、機能検出、レスポンシブデザインなどの相対概念を見ていくのに良い場所でもあります。

反対に、ウェブが素晴らしいプログラミング環境であるのはどうしてでしょうか。

• 基本的な状態は、アクセス可能でリンク可能な状態です。これらの基本的な状態のいくつかは、他にも環境によっては達成が難しい場合もあります。
• ウェブ上でのアプリ配信は単純かつ強力です。
• 更新は簡単です。多くの場合、ブラウザーのタブを再読み込みするだけで済みます。 大容量パッケージを常にダウンロードしてインストールする必要があるといった心配もありません。
• コミュニティは活気があり、役立つもので、学習に利用できる素晴らしいリソースがたくさんあります。

• 前のページ
• Overview: ウェブ標準
• 次のページ