ブラウザとその仕組み

2021年5月25日 11:09

ブラウザは何のためにありますか？

ブラウザとは、WEBサイトを閲覧するために使うソフトのこと。
専門知識がないと理解しづらいHTMLなどのプログラミング言語の記述を、ブラウザがWebページへと変換している。
各ホームページ（Webサイト）はHTMLやCSSなどのプログラミング言語で構成されており、それらのプログラミング言語で構成されたソースコードを読み込み、解釈して、一般の方でも見やすいWebページとして表示するのが、ブラウザの主な役割・機能。参照: DSマガジン

ブラウザでできること

・ウェブページのURLの表示と入力
・ウェブサイトの閲覧（HTMLを読込み画面に表示）
・気に入ったWEBサイトを登録できるブックマーク
・WEBサイト文字の拡大・縮小
・WEBサイトの共有（スマホの場合）
・WEBサイトをショートカットアイコンとしてホーム画面に追加

ブラウザの種類

1. Google Chrome: Google純正のWebブラウザ
Googleアカウントを利用して各種Googleサービス（Gmail、Googleカレンダー、Googleドライブなど）と連動できる。
スマホ・PC間での同期もでき、起動が早い。
表示のバグが少ない。

2. Firefox: Mozilla Foundationが開発したブラウザ
Chrome同様、PCなどほかのデバイス（端末）との同期が可能。
アドオン（追加ソフト）による機能拡張で自分の好みにカスタマイズできる。
表示のバグが少ない。

3. Internet Explorer(IE): Microsoft社が開発したブラウザ
表示や動作が遅く、古い技術が多く使われており安全性が低い。
表示のバグが多い。

4. Microsoft Edge: シェア率が下がったInternet Explorerの後継ブラウザ
Windows10以降のパソコンにはじめからインストールされていて、Macでは利用できない
バグについては賛否両論。

5. Safari: PhoneやMacBookなどのiOS端末向けに標準搭載されているブラウザ
他のブラウザと比較して正確にウェブページの描画ができ、CSSなどのデザイン描画に強いがWindowsのパソコンとは相性が悪い。- 表示のバグが少ない。

6. Opera: AndroidではOpera、iPhoneではOpera Mini
先進的な機能を導入していて動作は早い
知名度が低い

HTTPとブラウザの関係

HTTPはブラウザがサーバーにあるHTMLファイルを取得する時に従うルール（プロトコル）のこと
プロトコルに従ってHTTP通信（HTMLファイルのやり取り）をすることでブラウザ上に文字や画像を表示させる。

HTTP(HTTPS)について

Webページを表示させるためのファイルただのテキストファイル（文書）ではなく、ほかのテキストファイルへのリンクを埋め込んで、テキスト同士が結びつけられたファイルのこと。

このテキストで作られたリンクのことをハイパーリンクと呼ぶ。

HTML (HyperText Markup Language)
ハイパーテキストをマークアップする（書く）ための言語

WebサーバとWebクライアント
HTTPでデータのやり取りをする役割をもつ作ったHTMLファイルをWeb上で公開する時に必要なものがWebサーバ。 WebサーバにHTMLファイルを置いておくことで、ブラウザを通してHTMLファイルを取得できるようになる。 Webクライアント（ブラウザ）はHTTPというルールに従ってWebサーバにリクエストし、データを受け取る。

HTTP (HyperText Transfer Protocol)
WebサーバとWebクライアント間でデータを送りあう時に従うルール（プロトコル） HTTPS (HyperText Transfer Protocol Secure): HTTP通信をより安全に行うためのプロトコル

ブラウザがHTMLを受け取り画面として表示するまで

HTMLが飛んでくるとブラウザは、HTTPヘッダーを読込み、上から順にボディ（本文）を読込む。この時、ブラウザは、画像の指定などがあるたびにサーバーにリクエストを送る。ブラウザはHTMLやCSS、JavaScriptを読み込むとその構文を解釈し、レンダリング処理を行う。

レンダリング処理の順序:
DOMツリー構築
↓
レンダーツリー構築
↓
レンダーツリーレイアウト
↓
レンダーツリー描画

ブラウザの構造

1. ユーザーインターフェース(UI) アドレスバーや戻る・進むボタン、ブックマークメニューなどを担当

2. ブラウザエンジン UIとレンダリングエンジンのやりとりを仲介

3. レンダリングエンジン HTMLやCSSを解釈し、コンテンツを画面に表示するためのエンジン

4. ネットワーク HTTPリクエストのようなネットワーク部分を担当

5. UIバックエンドドロップダウンリストやウィンドウのような基礎的なパーツを描画する部分ネットワークと同様にプラットフォーム間の差異を吸収しており、異なるプラットフォームでも汎用的に利用できるインターフェースを提供している。

6. JavaScriptエンジン JavaScriptの構文を解釈し、実行するエンジン

7. データストレージ cookieのようなローカルデータの保存を担当

レンダリングの流れ

ユーザーがwebブラウザにURLを入力すると、ブラウザはURLを元に指定のサーバーにTCP/IPプロトコルに基づいてリクエストを送る。その後サーバはクライアントに対してレスポンスする。以降のレスポンスとして受け取るHTMLなどを処理して画面に表示することをレンダリングという。

オブジェクトモデルの構築

レンダリングエンジンはドキュメントの内容を通常8KBずつネットワーク層から読み込む。読み込んだHTMLドキュメントの変換・トークン化・字句解析を行い、DOMツリーを構築する。 CSSも同様に処理されCSSOMツリーが構築される。

レンダーツリーの構築

レンダリングエンジンはDOMツリーとCSSOMツリーを組み合わせることでレンダーツリーと呼ばれる別のツリーを構築する。レンダーツリーはページの描画に必要な全てのノードとスタイル情報を含む。

レンダーツリーを構築する時のブラウザの工程

1. DOMツリーのルートからはじめて、個々のノードをトラバースする。
scriptタグなど画面の描画に直接関係ないいくつかのノードは除かれる
CSSによりdisplay noneなどど非表示に指定されたものも除かれる

2. それぞれのノードに対応したCSSOMをみつけて適用する。

3. CSSが適用された表示可能になったノードを除く。

レイアウト（リフロー）

レンダーツリーが構築されると続いてレイアウトを行い、それぞれのノードが表示されるべき画面上の位置を計算する。レイアウトプロセスで出力されるものをボックスモデルといい、viewport内での個々の要素の正確な位置とサイズを算出し、相対的な値を画面上でのピクセルの絶対値に変換する。

描画（ペイントまたはラスタライゼイション）

最後に、レイアウトプロセスで得ることができた個々の要素のサイズと位置情報を最終的な正確なピクセル値へと変えるペイントの行程にそって、UIバックエンド層を用いてレンダーツリーの内容を描画する。

参照: Gigazine, ブラウザレンダリングの仕組み, ブラウザの仕組み: 最新ウェブブラウザの内部構造

用語集

レンダリング
レスポンス以降に受け取るHTML,CSS,Javascriptを処理して画面に表示する一連の流れ。

トークン化
スキャナによって得られた部分文字列にトークンの種別の情報を付け、その種類によっては、たとえば整数ならその整数値といったような意味値（semantic value）を与える処理。

トークン
プログラミングにおいて、ソースコード上の文字列を、それ以上分けることのできない最小単位に分けたもののこと。さらにいうと、ソースコードの内容を解析する時に記述されている文字を分割したとき、意味を持つ最小単位までに分割されたもの。 (例)変数名や演算子など