こんにちは。
システムエンジニアのYです。

皆さんが日々当たり前のように使用しているWebブラウザが、
どのように立ち上がり、ページが表示されているのかをご存じでしょうか。

Webエンジニアとして、知っていると少し有利になるような
「ブラウザを立ち上げてどのようにページを表示しているのか」
を簡単に紹介したいと思います。

大きく分けると以下の2つの工程に分かれています。

1.HTTPリクエストを投げ、HTTPレスポンスを受け取る

HTTPリクエストは
「ホームページを見るときに、ホームページを見るソフト（Webブラウザ）から
ホームページのファイルが置いてある
コンピュータ（Webサーバ）に対して出される
『このページを表示してくれ』というような要求のこと」です。

HTTPレスポンスは
「『このページを表示してくれ』という要求に対する
コンピュータからの返事のこと」です。

HTTPはWebブラウザとWebサーバのやり取りのことを指し、
HTTPリクエストとHTTPレスポンスは
要求と返信だと思うと分りやすいかもしれません。

皆さんが一度は見たことのある「404 Not Found」の画面は、
HTTPリクエストに対し、そんなものは無い！
という時に表示されるエラー画面です。

2.レンダリングエンジンが描画を行う
この処理は皆さんがご存じのHTMLやCSS等の画面表示方法と同じですね。
htmlドキュメントを解釈してDOM(Document Object Model)を構築し、
styleを当てはめてレイアウトしてから描画です。

さらに細かく見ていくと、
レンダリングエンジンがHTMLを解析し、DOMツリーを構築。
レンダリングエンジンがCSSを解析し、
CSSOM(CSS Object Model)ツリーを構築。
DOMツリーとCSSOMツリーを組み合わせ、レンダリングツリーを構築。
レンダリングツリーを基にレイアウトや配色等を設定し、ページを表示。

このような処理が行われてページが表示されているわけです。
簡単にですが、
「ブラウザを立ち上げてどのようにページを表示しているのか」
を紹介致しました。
興味がある方は是非さらに詳しく調べてみてください。 Back