【ブラウザ】仕組みについての学び

Posted at 2026-03-01

はじめに

普段触っているブラウザってどういった仕組みで動いてるのだろうか。

ブラウザはサーバーへリクエストを送り、サーバーから返ってきたレスポンスをもとに画面を表示しています。

じゃあ、このリクエストやレスポンスってどういったロジックや言語で動いてるのか。

またHTMLやCSS、JavaScriptの処理ってどうやっているのか。DOMツリーを構築してページを作るっていうのはわかるけど、この内部構造もなんらかのロジックで作られてるのではないか。

普段触っているWebサイトや言語についてはなんとなくわかっているけど、その中身をさらに突き詰めていくとどうなっているのか気になります。

本記事では、ブラウザの仕組みで理解できたことについてまとめております。

ブラウザの主な機能は、選択したウェブリソースをサーバーからリクエストし、ブラウザウィンドウに表示すること。

リソースは通常 HTML ドキュメントですが、PDF、画像、その他のコンテンツにすることも可能。

現代で使われている主要ブラウザとして下記のものが挙げられます。

そして、これらブラウザのユーザーインターフェースは、互いに多くの共通点があります。下記のような要素が共通してあります。

レンダリングエンジンの役割は、リクエストされたコンテンツをブラウザの画面に表示することです。

リクエストされたコンテンツが HTML の場合、レンダリングエンジンは HTML と CSS を解析し、解析されたコンテンツを画面に表示します。

代表的なレンダリングエンジンとして、WebKit があります。
WebKit はオープンソースのレンダリングエンジンです。

下記のような手順でパソコンの画面にサイトが表示されると思いました。

1. サーバーへリクエスト / ブラウザへレスポンス
2. DOM Tree
3. Render Tree
4. 描画

クライアントがサーバーへURLをリクエストとして送る。
サーバーから HTML / CSS / JavaScript が返ってくる。
しかし、まだページができてないからブラウザに表示されない。

HTMLはパーサーによって解析され DOM Tree が作成される。
CSSも同様に解析され、CSS オブジェクトが生成される。

HTML解析中に <script> タグに到達すると、JavaScriptの実行が行われるため、場合によってはHTMLの解析が一時停止される。

DOM Tree と CSS オブジェクトを組み合わせ、実際に画面へ表示される要素のみを含んだRender Tree が作成される。

レイアウトでは、Render Tree が作成された時点では位置やサイズに関する情報が存在しないため、各要素の値の計算が行われます。

主に width や height などのサイズや配置が決定されます。

その後、絵画（Paint）プロセスによってコンテンツが画面へ描画されます。

描画は、親要素から子要素へと順番に行われ、背景色、背景画像、border、アウトラインなどが表示されます。

以前まで、Webの仕組みといえば、細かい点を除き、
「サーバーへリクエストして結果がレスポンスされるとサイトを閲覧できる」
といった理解でした。

しかし、レスポンスされてからサイトが表示されるまでに、DOM / Render Tree が作られて、パーサーによって HTML CSS が解析されて、レイアウト〜描画と多くのプロセスを通じて、サイトが閲覧できるようになるのだと知りました。

普段見ているWebサイトは非常に高速で表示されますが、裏では大変なプロセスを通じて構築されてやっと私の前に表示されていると知り、これからWebサイトを見るときに意識が変わりそうな気がしました。

ブラウザに関してもただリクエストを飛ばすのでなく、WebKitのようなコンテンツを表示するためのレンダリングエンジンがあったり、ブラウザ同士で共通するユーザーインターフェースがあったりして、面白いと感じました。

普段からWebを親しんでいる自分からすると、ブラウザの仕組みを学ぶことは、より自分の知見や視野を広げるために必要なことだと感じました。

この記事が何か参考になると幸いです。また間違いなどがあればご教示くださいますと幸いです。