見出し画像
Photo by bantya_teitoku

【メモ】 ブラウザの仕組み

sumi

レンダリングの種類

ブラウザ内のコンポーネント

ブラウザはいくつかのソフトウェアコンポーネントによって構成されている。

  • レンダリングエンジン

  • JavaScriptエンジン

レンダリングエンジン

ブラウザ内部で利用されるHTMLの描画エンジン。ブラウザそのものでなく、純粋にWebページのレンダリングのみを担当するソフトウェアコンポーネント。

シェア率は下記サイト参照(2022/01/13時点)

Internet Explorerは2022 年6月16日サポート終了

レンダリングエンジンはHTML, 画像ファイル, CSS, JavaScriptなどの各種リソースを読み取り、それを画面上の実際のピクセルとして描画。
ユーザーインターフェイスは持っていないため、ブラウザ以外でも使われている。
（e.g. メールクライアントではHTMLを表示するため内部にレンダリングエンジンを組み込んでいる）

JavaScriptエンジン

JavaScriptの実行環境を提供するソフトウェアコンポーネント。レンダリングエンジンと共にブラウザ内部で利用されている。

レンダリングエンジンとともに利用される場合には、DOMツリーやCSSOMツリーなどの内部のオブジェクトやAPIに対して、JavaScriptからアクセスできるようにするバインディングを提供。

Web View

Web ViewとはWebページを表示できるソフトウェアコンポーネント。
ブラウザと違いアドレスバーなどのUIは提供せず、あくまでWebページの表示のみを行うコンポーネント。
主にAndroidやIOSなどのモバイルやハイブリッドアプリでWebページをアプリ内で表示するViewとして提供されている。

ブラウザのレンダリングの流れ

4つ工程からなるレンダリングが始まって最終的に描画されるまでをFrameと呼ぶ。

Loading = リソースの読み込み

ブラウザは与えられたURLからHTMLを読み込み、必要なリソースを読み込む。

  • リソースのダウンロード

    • HTMLを含むリソースをサーバーからダウンロードする

  • リソースのパース

    • パース（構文解析）して変換する

    • HTML→DOMツリー、CSS→CSSOMツリーに変換される

リソース一覧

  • HTML

  • CSS

  • JavaScript

  • 画像ファイル

  1. ブラウザはURLに含まれるホスト名をIPアドレスに変換

  2. TCP/IP接続を確立

  3. TLSが暗号化された接続を確立（HTTPSの場合）

  4. HTTPSでサーバーへリクエスト

  5. サーバーはリソースを返す

補足：
IP(Internet Protocol)はパケットの内容が壊れたり複製されて届く不安定なプロトコル。
上位のプロトコルであるTCPを用い相手に確実に届ける・データの欠損を検知して再送・データの送信順などを保証。
HTTPはTCPの上で利用されており、HTTP接続する前に必ずTCP接続を確立する。
HTTPS通信の場合はTCPとHTTP間でさらにTLSプロトコルを使用。
TLSはSSL（Secure Sockets Layer）と呼ばれる。改ざん、盗聴、なりすましのリスクを減らす。
HTTPS - MDN Web Docs Glossary: Definitions of Web-related terms | MDN
上記のプロトコルを利用してリソースを取得。
最初にHTMLを取得。HTMLに記述されているリソースの参照があれば読み込み。さらに参照があれば再帰的に読み込んでいく。

Scripting = JavaScript実行

レンダリングエンジンはJavaScriptをJavaScriptエンジンに引き渡して実行する。
JavaScriptエンジンでは、JavaScriptコードをパース（字句解析・トークンを利用した構文解析）して抽象構文木に変換。それをコンパイルする。（V8ではJITされて最適化された機械語へ変換される）

Rendering = レイアウトツリー構築

DOMに対してどのようなCSSが当たるのか計算しレイアウトツリーを構築する

  • CSSルールセット

    • CSSセレクタ・・・ .my-classname

    • CSSルール・・・ color: red

.my-classname {
	color: red;
}

レンダリングエンジンは全てのDOM要素に対してどのCSSルールセットが適用されるのか計算する。（=マッチング処理）
CSS Object Model (CSSOM) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN
CSSセレクタは右から左に解釈して処理を行う。

  1. fugaクラスを探す

  2. 親要素のhogeクラスを探す

.hoge > .fuga {
 ...
}

次に適用されるCSSプロパティを算出するため詳細度を計算する。

CSSの計算が終わるとDOMツリー、CSSOMツリーからレイアウトツリーを構築する。

Painting = レンダリングした内容の描画

ペイント（描画）、ラスタライズ、レイヤーの合成を行う。
First Meaningful Paint - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

  • ペイント

    • テキスト、色、境界線、影など視覚的な部分を画面に描画

  • ラスタライズ

    • ピクセル（ビットマップ）へ描画

  • レイヤー合成

    • 主にCPUによって合成されるが translate3d などの3D変形関数はGPUによって合成される

      • 3Dのz軸（奥行き）を伴う変形処理はCPUで計算するよりもGPUで計算するほうが速いと言われている

      • 他にもレンダリングエンジンによってGPUで合成されるものがある

順番を決めずに描画してしまうと、要素に z-index が設定されていた場合など要素の重なりが考慮されない画面になってしまう。そのため、Paint Recordsを作成し奥から手前の順番で指定される。
このPaint Recordsの順番は Stacking Contextに要素がスタックされる順番と同じ。
重ね合わせコンテキスト - CSS: カスケーディングスタイルシート | MDN

参考

Populating the page: how browsers work - Web performance | MDN
ちいさな Web ブラウザを作ってみよう


スキ頂けると嬉しいです〜