Webブラウザがコンテンツを表示する仕組み

様々なWebブラウザの基本的な仕組みは同じ

現在のWebブラウザは「Google Chrome」「Internet Explorer」「Firefox」「Safari」「Microsoft Edge」などが大半を占めます。

それぞれ、高速表示、アドオンによる機能追加、HTML5対応、開発者向けツールなどの特徴がありますが、基本的な仕組みは同じです。

Webブラウザ

1.Webサーバとの通信

Webブラウザのアドレス欄に閲覧したいWebページのURLを入力すると、WebサーバにアクセスしてHTMLファイルを取得します。

2.解析(DOM/HTML)

WebブラウザがHTMLファイルの各要素を「DOM(Document Object Model)」と呼ぶ階層構造のオブジェクトとして解釈します。

ブラウザの画面に表示される構成要素(DOM)は階層構造になっていて、画面上はそのトップに位置するボタンや表示エリアにすぎず、その配下で多くの要素が関連づけられている

3,描画(レンダリング)

Webブラウザの画面に描画(レンダリング)を行います。

シンプルなWebページの場合はここまで。

4.アクション

JavaScriptを利用して、ユーザのアクションに応じて動的に表示内容を変更します。

例えば、Googleマップの地図のマウス操作により、それに合わせて地図画面が変わっていく動作などです。

5.Service Worker

Webブラウザのバックエンドで動くJavaScript環境で、複数のスクリプトの並行処理を実現できます。

これによりバックグランド同期やプッシュ通知などといった機能に対応することができます。

Webブラウザの通信高速化

SPDY(スピーディ)

SPDYはGoogle社による開発技術ですが、HTTP/2で標準仕様化されています。

HTTPS通信を行う場合、従来のHTTP/1.1では、1回のリクエスト・レスポンスごとにTLSのハンドシェイクが発生するため、オーバヘッドが高い状況でした。

これに対してSPDYは、1本のTLSセッションの中で複数のリクエスト・レスポンスを並列に処理することで高速化を実現しています。

QUIC(Quick UDP Internet Connections)

QUICは、トランスポート層のプロトコルとして、ハンドシェイクに多くのやりとりが必要なTCPを使わずに、UDPを使うことでオーバヘッドを減らしています。

TCPの再送制御など信頼性の担保はどうするか疑問に思われますが、それらの機能はQUICで実施させます。