ブラウザとは？#
正式名称はウェブブラウザ（Web browser）ですが、一般的にブラウザと呼ばれることが多いです。
ブラウザはGUIベースのアプリケーションソフトウェアで、WebサーバーとHTMLドキュメントやファイルを双方向に通信して表示します。コンピュータで最も長く使っているプログラムです。同じ理由でGoogleは、ほとんどのユーザーがブラウザ上でコンピュータを使う時間が多いと判断してChrome OSを作ったと言っています。24年時点でほとんどのブラウザはChromiumを使用しています。
ブラウザを使えばWeb上のどこにでもアクセスできます。どこかのデータをリクエストするとHTTPを使ってデータをやり取りします。
以前はこうしたブラウザプログラムは各国の企業がそれぞれ異なる形で開発していました。そのため、あるブラウザではある所で開発した画面や機能がうまく動くのに、別のブラウザではうまく動かないということがありました。同じコンテンツがブラウザごとに異なって表示されないよう一貫性を持たせるため、Web標準が作られました。
昔の韓国のSIプロジェクトでは、公務員が主にIE（Internet Explorer）を使っていたため、IEで正しく表示されることが重要でした。しかし開発者はChromeでテストしてうまくいったので納品したところ動かないケース（「自分のPCでは動くんですけど？」）が発生することもありました。
Webとは？
WebはWorld Wide Web（WWW）の略です。Webはインターネット上の情報です。Webはハイパーテキスト文書とリンクで構成された情報共有システムです。インターネット上には多くのサービスがありますが、その中で最も人気のあるサービスがWebです。ブラウザを使用するすべてのケースをWebの利用と言えます。Webサービスでできることが増えたことで、Web上でオンラインショッピング、バンキング、SNS、ゲームなどができるようになりました。インターネットを使用するWeb以外の他のサービスとしては、メール、ファイル転送、チャット、リモートアクセス、オンラインゲーム、P2P、VoIPなどがあります。
インターネットとは？
インターネットとは世界中にわたって遠距離アクセスやファイル転送、電子メールなどのデータ通信サービスを受けられるコンピュータネットワークのシステムです。インターネットは誤ってWorld Wide Webと呼ばれることがありますが、インターネットは世界中のコンピュータと回線の物理的な接続に過ぎません。
ブラウザの動作ステップ#
ブラウザはWebページを閲覧・表示するためのソフトウェアアプリケーションです。ユーザーが目的のサイトのドメイン名をアドレスバーに入力するか、検索サイトでキーワードを入力してリクエストを送った結果のリンクをクリックすると、該当のWebページをレンダリングします。
1. URLの解析とリクエスト
ユーザーがURLを入力すると、ブラウザは以下の過程を経ます。
- URLパース: URLを解析してプロトコル、ドメイン、パス、クエリ、パラメータなどを分離します
- DNS問い合わせ: ドメイン名をIPアドレスに変換するためにDNSサーバーにクエリを送ります
- HTTPリクエスト: 変換されたIPアドレスにHTTP/HTTPSリクエストを送ります。このリクエストにはメソッド（GET、POSTなど）、ヘッダー、Cookieなどが含まれます
2. サーバーレスポンスの処理
サーバーは受け取ったHTTP/HTTPSリクエストを処理してレスポンスを返します。
レスポンスにはステータスコード、ヘッダー、ボディが含まれています。
- ステータスコード（Status Code）: 200（成功）、404（Not found）、500（サーバーエラー）など処理結果を知らせます
- ヘッダー（Headers）: コンテンツタイプ、キャッシュ指示、Cookieなどさまざまなメタデータを含みます
- ボディ（Body）: HTML、CSS、JavaScript、画像などWebページを構成する実際のデータ
3. HTMLのパースとDOM生成
サーバーから受け取ったHTMLをパースしてDOM（Document Object Model）ツリーを生成します。
DOMを作る際にはトークン化とツリー構築の過程を経ます。
- トークン化: HTMLテキストをトークンに分離します
- ツリー構築: トークンを基にDOMノードを生成します。ツリー構造で構成します
4. CSSのパースとレンダーツリー生成
HTMLと同様にCSSもパースしてスタイルルールを適用できるレンダーツリーを作ります。
- CSSOM生成: CSSもパースしてCSSOM（CSS Object Model）を生成します
- レンダーツリー生成: DOMとCSSOMを結合してレンダーツリーを作ります。このツリーは実際に画面に表示される要素のみを含みます
5. レイアウト計算
レンダーツリーを基に各要素の位置とサイズを計算します。
- ブロック・インラインレイアウト: 各要素のボックスモデルを計算して画面のどこに配置されるかを決定します
6. ペイントとコンポジティング
計算されたレイアウトを実際のピクセルに変換します
- ペイント: 背景、テキスト、画像などを含めて各要素をペイントレイヤーとして描きます
- コンポジティング: 複数のペイントレイヤーを結合して最終画面を構成します
7. JavaScriptの実行
Webページに含まれるJavaScriptコードを実行します
- パースとコンパイル: JavaScriptコードをパースしてバイトコードにコンパイルします
- 実行: バイトコードを実行してDOM操作、イベント処理、AJAXリクエストなどを行います
8. レンダリングの更新
JavaScriptコードがDOMやCSSOMを変更すると、レンダーツリーを更新して必要な部分を再描画します
- リフロー: レイアウトが変更されると再計算します
- リペイント: スタイルが変更されると該当要素を再描画します
ブラウザは基本機能以外にもさまざまな付加機能を提供します
- キャッシュ: よく使うリソースをキャッシュしてパフォーマンスを向上させます
- CookieとLocal Storage: ユーザーデータをローカルに保存して状態を維持します
- セキュリティ: HTTPSによる安全な通信、XSSおよびCSRF防止、コンテンツセキュリティポリシー（CSP）などでセキュリティを強化します
- プラグインと拡張機能: ユーザーカスタム機能を追加できるプラグインと拡張機能をサポートします
ブラウザの構造#
今回の記事では表面的なレベルでのみ書きました。ブラウザに関するより詳しい説明は以下の記事を参考にしてください！
- The Chromium Projects - Multi-process Architecture
- Google Docs - How Blink works
- Life of a Pixel - Google Slides / YouTube
- The Chromium Projects - How Chromium Displays Web Pages
- MDN - How browsers work
- Quastor - The Architecture of Web Browsers
ブラウザの核心はレンダリングです。ユーザーが見たいコンテンツを取得して、ユーザーが見られるように画面を作ることが目的です。
User interface#
ブラウザのUIはアドレスバー、戻るボタン、ブックマーク、更新ボタンなどを表示してユーザーとインタラクションするインターフェースです。ユーザーがブラウザを使用する接点だと考えていただければ良いと思います。
ChromeブラウザのUIが標準というわけではありませんが、ほとんどのブラウザは同じ機能を実行するUIを提供しています。
Browser engine#
ブラウザエンジンは、ブラウザのユーザーインターフェースとレンダリングエンジン間の作業を案内する仲介役です。
実行すべきタスクをブラウザGUIで表示できるようレンダリングエンジンと通信します。
Rendering engine#
ChromiumではレンダリングエンジンとしてBlinkを使用しています。
レンダリングエンジンはリクエストされたコンテンツを表示する役割を担当します。レンダリングエンジンはネットワーク層からリクエストされた文書の内容を取得することから始めます。
HTMLコードを取得して構文解析を行い、DOM（Document Object Model）ツリーを作ります。次にレンダリングエンジンはCSSを構文解析してCSSOM（CSS Object Model）ツリーを作ります。CSSOMはDOMと似ていますが、HTML用ではなくCSS用です。
CSSが構文解析されてCSSOMが生成される間、ブラウザはネットワーク層を通じてJavaScriptファイルなどの他のアセットをダウンロードします。
レンダリングエンジンはJavaScriptインタープリターと通信してJavaScriptコードを実行し、DOMとCSSOMを操作します。次にレンダリングエンジンはDOMとCSSOMを取得して両方を結合しレンダーツリーを作ります。
レンダリングエンジンはUIバックエンドを使用してWebサイトを画面にレイアウトし、最後にピクセルを画面に描画します。
レンダリングエンジンが経る全プロセスをCritical Rendering Pathと呼びます。
Networking#
ネットワーキング層はリソースを取得するためにネットワーク呼び出しを行う役割を担当します。接続制限、リクエスト形式、プロキシ処理、キャッシュなどを行います。
JavaScript interpreter#
JavaScriptインタープリターはDOMやCSSOMでJavaScriptコードを構文解析し実行するために使用されます。JavaScriptコードはWebサーバーから提供されたり、Webブラウザやブラウザ拡張機能から提供されたりします。
最新のブラウザはJavaScriptインタープリターの代わりにJIT（Just In Time）コンパイルを使用しています。ChromeはV8というJavaScriptエンジンを使用しています。
UI backend#
UIバックエンドはセレクトボックスや入力フィールド、ウィンドウなどの基本ウィジェットを描画する役割を担当します。UIバックエンドはOSのUIメソッドを使用します。
レンダリングエンジンはレイアウトおよびペイント段階でUIバックエンドレイヤーを使用してブラウザにWebページを表示します。
Data persistence#
ブラウザは必要なデータをローカル（Cookie、キャッシュなど）に保存します。
最新のブラウザはlocalStorage、IndexedDB、FileSystemなどの機能をサポートしています。
なぜブラウザではJavaは使えずJavaScript言語だけ使用できるのか？#
JavaScript言語は1995年にNetscape社のBrendan Eichによってブラウザで動作するクライアントサイドスクリプティング言語として開発されました。JavaScriptはWebページの動的な動作とユーザーインタラクションのために設計されました。各ブラウザで使用される他のスクリプト言語もありましたが、最終的にJavaScriptが標準となり多くの人がこの言語を使うようになって大きく普及しました。
主要なブラウザにはスクリプティング言語であるJavaScriptがデフォルトで内蔵されているため、ユーザーはJavaScriptを別途インストールしなくても実行できます。しかしシステムリソースにはアクセスできず、ブラウザ上ではWebページ内でのみ動作します。Javaはクライアントサイドよりサーバーサイドに適した言語です。
スクリプティングとはスクリプト言語でコーディングすることを指します。スクリプトは主に単一の範囲または限定された範囲のタスクを実行するのに使用されます。JavaScriptがブラウザ内でのみ使われていたところから、その範囲が広がったと考えれば良いでしょう。
Do not wait; the time will never be 'just right.' Start where you stand, and work with whatever tools you may have at your command, and better tools will be found as you go along.
— George Herbert
