ブラウザとは何をしているソフトなのか - Web開発における知見共有系ページ

ChromeやSafari、Edgeは、Webページを表示するソフトだと思われがちです。
しかし実際には、ブラウザは小さな実行環境です。

画像ビューアのようにファイルを開いているわけではありません。
ブラウザは、インターネットから受け取ったデータを解析し、組み立て、実行し、画面に描いています。

つまりブラウザは「閲覧ツール」ではなく、
Webページを動かすための専用OSに近い存在です。

URLを入力すると、ブラウザはサーバへ通信します。

GET /index.html HTTP/1.1
Host: example.com

サーバはHTMLを返します。
ここで重要なのは、返ってくるのは画面ではなくテキストである点です。

ブラウザは「ページ」を受け取っているのではありません。
ページの材料を受け取っています。

HTMLは単なる文章です。
ブラウザはこれをそのまま表示しているわけではありません。

内部でDOMという構造に変換します。
これは「ページの部品一覧」です。

この変換によって、ブラウザはページの意味を理解します。
もしこれがなければ、クリックもスクロールも機能しません。

次にブラウザはCSSを読み込みます。
ここで要素の配置やサイズを計算します。

これをレイアウト計算と呼びます。
Webページが複雑になるほど、この計算量は増えます。

そのため、回線が速くても表示が遅い場合があります。
原因は通信ではなく計算です。

ブラウザにはJavaScriptを実行する仕組みが内蔵されています。
これがページを「動かす」部分です。

document.body.style.backgroundColor = 'black';

このコードが動くと、画面の色が変わります。
サーバは関与していません。
ブラウザが直接画面を書き換えています。

つまりブラウザは単なる表示装置ではなく、
プログラムを実行するコンピュータです。

解析と計算が終わると、ブラウザは画面に描画します。
この処理をレンダリングと呼びます。

ここで初めてユーザーが見る画面が完成します。
ただし、これで終わりではありません。

JavaScriptがイベントを待ち続けるため、ページは動作状態を維持します。

「サーバがページを表示している」と思われがちですが、違います。

サーバはHTMLを送るだけです。
画面を作っているのはブラウザです。

このため、同じサイトでもブラウザによって見え方が変わることがあります。
描画方法が異なるからです。

あるサイトが特定のブラウザだけで崩れることがあります。
これはサーバの問題ではありません。

原因は

です。

開発者が複数ブラウザで確認する理由はここにあります。

ブラウザには安全装置もあります。
WebページのプログラムがPCのファイルを勝手に読むことはできません。

これはサンドボックスと呼ばれる仕組みです。
JavaScriptがローカルファイルに直接アクセスできないのは、このためです。

もし制限がなければ、ページを開いただけで情報が盗まれます。
ブラウザは「実行環境」であると同時に「防御装置」でもあります。

ブラウザは、通信・解析・実行・描画を一括で行うソフトです。

これらを同時に行っています。

Webページはファイルではありません。
ブラウザがリアルタイムで生成している画面です。

つまり、私たちが見ているのは「送られてきたページ」ではなく、
ブラウザがその場で組み立てた結果なのです。
この視点を持つと、Webの挙動が単なる表示ではなく処理として理解できるようになります。