ブラウザの仕組み - レンダリング

はじめに

HTML,CSS で Web サイトの見た目を作り、JavaScript で動きを出す。そして、PHP を使って MySQL などデータベースとやり取りをする仕組みを作る。
今までにこのようなことを学んできましたが、ではそれがブラウザ上で実現するために、ブラウザがどのような仕組みになっているのか。
今回は、ブラウザの仕組みについて学んだことをまとめていきます。

ブラウザの大まかな構造

ブラウザの主な機能は、HTMLファイルや画像などのウェブリソースをサーバーにリクエストし、ブラウザウィンドウに表示することです。
リソースのある場所は、ユーザーが URI (いわゆる URL )で指定します。

ブラウザはサーバーから受け取ったHTMLやCSSの情報を解析して画面に表示するのですが、その裏側では何が起こっているのでしょうか。
まずは、大まかにブラウザ全体の構造を把握していきましょう。

ブラウザはいくつかのパーツに分けることができます。

• ユーザーインターフェース（UI）
• ブラウザエンジン
• レンダリングエンジン
• ネットワーク
• UI バックエンド
• JavaScript インタープリタ
• データストレージ

これを図に表したのが以下です。

出典：Web dev - ブラウザの仕組み

それぞれについて、簡単に解説します。

ユーザーインターフェース（UI）

ユーザーインターフェースは、ユーザーとブラウザの接点となる部分のことです。
ブラウザの画面のうち、Web ページを表示する部分以外のすべてを指し、アドレスバーや戻るボタン、ブックマークバーなどが該当します。

ブラウザエンジン

ブラウザエンジンは、UI とレンダリングエンジン間でデータの交換やができるようデータ形式の変換などを行います。

レンダリングエンジン

レンダリングエンジンは、リクエストされたコンテンツを表示します。たとえば、リクエストされたコンテンツが HTML の場合、レンダリング エンジンは HTML と CSS を解析し、解析されたコンテンツを画面に表示します。

ネットワーク

HTTPリクエストのようなネットワーク部分を担当します。

UI バックエンド

UI バックエンドは、どのプラットフォームでも見るようなコンボボックス(記入できるドロップダウンリストのこと)やウィンドウなどの基本的なウィジェットの描画に使用されます。

JavaScript インタープリタ

JavaScript コードを解析して実行するために使用します。

データストレージ

Cookie など、あらゆる種類のデータをローカルに保存しなければならない場合があります。その際に使用する永続的な保存庫がデータストレージです。

今回は、これらのうち、中核をなすレンダリングエンジンの役割について詳しく見ていきます。

レンダリングエンジン

レンダリングとは、HTML などのコードで
書かれた文書を、ルールに基づいて解析し、見た目を整えて画面に表示することをいいます。
レンダリングエンジンは、ブラウザによって異なるものが使用されています。

レンダリングの流れ

レンダリングは、大きく分けて以下の流れで進行します。

• パース
• レンダリングツリー構築
• レイアウト
• ペインティング

1.パース

パース(perse) とは、解析するという意味です。HTML ファイルを上から順に読んでいき、コードを元に要素をDOMツリーに配置していきます。

DOM ツリーとは

DOM は、Document Object Model の頭文字をとったもので、Javascriptなどで外部操作できるようにするための定義です。
DOM ツリーは、DOM の定義を元に Web ページ上の要素の階層構造を表現したデータ構造のことです。

HTML ファイルから DOM ツリーが作られ、また、CSS ファイルからはそのCSS
版の CSSOM(CSS Object Model)ツリーが作られます。

コードを解析してこれらのツリーを作成するのがパースのフェーズです。

2.レンダリングツリー構築

DOM ツリーと CSSOM ツリーの情報を元に、画面表示のための情報を整理したレンダリングツリーを作成します。
画面表示用なので、CSS で display: none が指定された HTML 要素などは含まれません。

3.レイアウト

レンダリングツリーを元に、ブラウザの画面にどのように要素を配置するかを計算するのが、レイアウトの段階です。
width: 50% などの計算を行います。

4.ペインティング

実際に画面に描画して表示することをペインティングといいます。

レンダリングブロックとは

このレンダリングの過程を踏まえて、コーディングする際に注意するべき点がレンダリングブロックです。
レンダリングはパース後に行われますが、すべてパースされてからレンダリングするのではなく、パースされたものを元に逐次レンダリングを行っていきます。
その中で、CSS ファイルの読み込みが遅れている場合やJavaScript ファイルをダウンロードする場合レンダリングの開始が遅れる原因になります。

レンダリングブロックの解消法

CSS のレンダリングブロックを解消するには、「メディアタイプ」と「メディアクエリ」を使う方法があります。
また、JavaScript のレンダリングブロックについては、JavaScript のコードを HTML 内に含めるか、JavaScript の非同期化で解消できます。非同期化の方法には async と defer の 2 つのやり方があります。
JavaScript を非同期にした場合、外部参照のJavaScript ダウンロードと並行してパースを続けることができるのです。
これらを念頭に置いてコードを書くことで、Webページの高速化に繋げることができるでしょう。

最後に

今回は、ブラウザの仕組み、特にレンダリングの流れについてまとめてみました。
まずは概要を掴むことが大事だと思うので簡単にまとめてみましたが、これらの理解ができたら、さらに詳しくパースの流れなどを学んでいくとよいでしょう。

参考サイト：
Web dev - ブラウザの仕組み
【図解/ブラウザの仕組み】DOMとパースとレンダリング,asyncとdeferについて