Zenn
🕸

サクッと学ぼうWebブラウザの仕組み

2023/11/26に公開
CSS
HTML
JavaScript
Web
frontend
tech

はじめに

Web ブラウザの仕組みについて調査したのでまとめてみました。プラウザの構成要素から、各コンポーネントの役割を解説しています。

プラウザの正体

C++で開発されたソフトウェアです。

プラウザの種類

パソコンで使用されている主なブラウザ

  • Chrome
  • Firefox
  • Safari
  • IE(Internet Explorer)
  • Opera

モバイル ブラウザの主なブラウザ

  • Android ブラウザ
  • iPhone
  • Chrome
  • Opera Mini
  • Opera Mobile
  • UC Browser
  • Nokia S40/S60

ブラウザはたくさんあるんあるけど、どうやって互換性を担保してるの？

ブラウザによる HTML ファイルを解釈、表示する方法は、ウェブの標準化団体である W3C（World Wide Web Consortium）によって規定されています。この規定によりブラウザの互換性が担保されている分けです。

プラウザの機能

クライアントは、URI から必要なリソース（HTML ドキュメント、PDF、画像など）を入力し、リクエストを送信します。その結果、ブラウザウィンドウにレスポンスが表示されます。

プラウザの主な各コンポーネントを紹介

  1. ユーザーインターフェース

    • アドレスバー、戻る/進む/更新ボタン、ブックマークなど UI 部分を担当しています。

  2. ブラウザエンジン

    • ユーザーインターフェースで送られたデータをレンダリングエンジンに分かるようにデータを加工して受け渡すマーシャリングをする役割を持っています。

  3. レンダリングエンジン

    • リクエストされたコンテンツ(HTML、CSS、JavaScript、SVG など)を解析、描画して表示をする役割を持っています。プラウザごとに使用している HTML のレンダリングエンジンには、Trident(IE)、Gecko(Firefox)、WebKit(Safari)、Blink(Chrome と Opera)があります。

  4. ネットワーキング

    • ブラウザがリソースを取得する為に、HTTP（Hypertext Transfer Protocol）や HTTPS（HTTP Secure）を使ってサーバーにリクエストを送る役割を持っています。

  5. UI バックエンド

    • ブラウザのユーザーインターフェースを描画する役割を持っています。

  6. JavaScript エンジン

    • JavaScript コードを解析して実行する役割を持っています。

  7. データストレージ (永続性レイヤ)

    • 永続性レイヤは様々なデータストレージメカニズム（Cookie、localStorage、IndexedDB、WebSQL、FileSystem など）をサポートしています。ユーザーがブラウザで行ったアクションや設定、特定のウェブサイトでの操作履歴などを保存し、後で再利用する役割を果たします。この仕組みは、一時的な情報だけでなく、セッション終了後やブラウザの再起動後も残したい情報を保持するために活用されます。

HTML レンダリングエンジン(WebKit)のメインフロー

  1. HTML ドキュメントが解析され「DOM ツリー」が構築されます。
  2. CSSL スタイルデータを解析し「スタイル情報」を取得します。
  3. DOM ツリーと CSS のスタイル情報が結合され「レンダリングツリー」が構築されます。
  4. 「レンダリングツリー」をもとに、各要素が画面上のどこに表示されるか計算され、レンダリングエンジンが画面に要素を配置し描画します。

「解析」について掘り下げて説明します

解析とは主に文書やデータを読み込んで、コンピュータが理解可能な構造に変換するプロセスです。解析の結果はドキュメントの構造を階層構造で表すノードのツリーになります。これは「解析ツリー」または「構文ツリー」と呼ばれます。

解析のプロセスと翻訳(コンパイル)

解析は、字句解析(レクサー)と構文解析(パーサー)の 2 つのサブプロセスに分けられます。

  1. 字句解析(レクサー)の役割
    • 入力テキストをトークンに分割するプロセスです。これにより、テキストを解析しやすい形式に変換します。
      例えば、プログラミング言語のソースコードをトークンに分割する際、識別子、演算子、数値、変数、定数、コメントなどのトークンが生成されます。
  2. 構文解析(パーサー)の役割
    • 字句解析(レクサー)で生成されたトークンを使って、文法規則に従って解析ツリー（構文木）を構築します。
      この解析ツリーは、プログラムの構造を表し、プログラムの意味を理解するためのデータ構造です。
  3. 翻訳(コンパイル)
    • 解析された情報を元に、プログラムを別の形式に変換するプロセスです。
      例えば、ソースコードをマシンコード（バイナリ）に変換するコンパイルがあります。
      コンパイルの過程で、解析された構文ツリーから命令セットや最適化されたコードが生成され、最終的にマシンコードドキュメントが作成されます。

まとめてみた感想

  1. プラウザそれぞれが独自の特性を持つのは興味深いですが、開発者としてはその違いに対処するのが少々手間ですね。
  2. JavaScript や React における DOM 操作のイメージがより具体的になりました。
  3. ブラウザの主要な各コンポーネントを理解できたことは、今後の開発に非常に役立ちそうです。
GitHubで編集を提案

Discussion