ブラウザの概要とその仕組み

投稿者: | 2020-05-24
0件のコメント
Table of Content

この記事では、WEB エンジニアを目指して学習をしている初心者向けに、WEB ブラウザの概要と仕組みについて説明します。

ブラウザとは何か

ウェブブラウザ（インターネットブラウザ、web browser）とは、パソコンやスマートフォン等を利用して Web サーバに接続するためのソフトウェアであり、ウェブページを表示したり、ハイパーリンクをたどったりするなどの機能があリます。単にブラウザ（ブラウザー）とも呼ばれます。

主なウェブブラウザとして、

  • Google Chrome
  • Mozilla Firefox
  • Safari
  • Microsoft Edge
  • Internet Explorer

等があリます。

ブラウザの主な機能

ブラウザの主な機能はユーザーの選択したウェブ リソースをサーバーに要求してブラウザ ウィンドウに表示することにより、ユーザーに提示することです。通常、リソースは HTML ドキュメントですが、PDF や画像など、他のタイプのリソースもあります。リソースの場所は URI（Uniform Resource Identifier）を使用してユーザーが指定します。

ブラウザの仕組み

ここでは、WEB ブラウザがリクエストを送ってから WEB ページが表示されるまでの仕組みを解説します。

ブラウザの構成要素

ブラウザの仕組みを説明する前に、ブラウザの構成要素について説明します。
ブラウザの主な構成要素は次の通りです。

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

    アドレスバー、戻る/進むボタン、ブックマーク メニューなどがあります。ブラウザ画面のうち、要求したページが表示されるメイン ウィンドウを除くすべての部分です。

  2. ブラウザ エンジン

    UI とレンダリング エンジンの間の処理を整理します。

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

    要求されたコンテンツの表示を担当します。たとえば、要求されたコンテンツが HTML の場合は、HTML と CSS を解析し、解析されたコンテンツを画面に表示します。

  4. ネットワーキング

    HTTP リクエストなどのネットワークの呼び出しに使用されます。プラットフォームに依存しないインターフェースと、プラットフォームごとの下部の実装を備えています。

  5. UI バックエンド

    コンボ ボックスやウィンドウなどの基本的なウィジェットの描画に使用されます。プラットフォームに依存しない汎用的なインターフェースを公開し、その下ではオペレーティング システムのユーザー インターフェース メソッドを使用しています。

  6. JavaScript インタープリタ

    JavaScript コードの解析と実行に使用されます。

  7. データ ストレージ

    永続的なレイヤです。ブラウザでは Cookie(クッキー)などさまざまなデータをハード ディスクに保存する必要があります。HTML5 では、ブラウザ内の軽量なデータベースである「ウェブ データベース」が定義されています。

WEB ページが表示される仕組み

WEB ブラウザがリクエストを送ってから WEB ページが表示されるまでのステップは次の通りです。

  1. コンテンツの取得

    要求したドキュメントのコンテンツをネットワーキング レイヤから取得します。この処理は 8 キロバイト単位で行われます。

  2. HTML ドキュメントの解析と DOM ツリーの構築

    レンダリング エンジンは HTML ドキュメントの解析（パース）を開始し、HTML タグを「コンテンツ ツリー」というツリー内の DOMノードに変換します。

    (DOM とは、「Document Object Model」の略で、HTML ドキュメントや、HTML 要素と JavaScript などの外部世界とのインターフェースをオブジェクトで表現したものです。)

  3. レンダーツリーの構築

    スタイル情報と HTML 内の視覚的な指示を組み合わせて、「レンダー ツリー」という別のツリーが作成されます。

    レンダー ツリーには色や寸法などの視覚的な属性を持つ矩形が含まれています。矩形は画面に表示される正しい順序で並んでいます。

  4. レイアウト処理

    レンダー ツリーが構築されると、「レイアウト」処理に進みます。つまり、画面に表示される正確な座標が各ノードに割り当てられます。

    (レンダーツリーは、視覚的な要素を表示順に並べたツリーであり、ドキュメントの視覚的な表現です。レンダー ツリーの目的は、コンテンツを正しい順序で描画できるようにすることです。)

  5. 描画処理

    レンダー ツリーが走査され、UI バックエンド レイヤを使用して各ノードが描画されます。

    描画は段階的に行われます。ユーザーに快適に操作してもらえるよう、レンダリング エンジンはできるだけ早くコンテンツを画面に表示しようとします。すべての HTML が解析されるのを待ってから、レンダー ツリーの構築とレイアウトを開始するわけではありません。コンテンツの一部が解析され、表示される間に、ネットワークから残りのコンテンツが届いて処理が続けられます。

まとめ

この記事では、WEB ブラウザの概要と WEB ページが表示される仕組みについて説明しました。
WEB 開発を行うにあたり、WEB ブラウザの仕組みは基本的な知識になるので、しっかり抑えておきましょう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です