ブラウザレンダリングの仕組みを覚えておきたい

ブラウザレンダリングの仕組みを覚えておきたい

少しでもブラウザレンダリングがどういうものなのか知っておく理由は、ただ知識が欲しいからというわけではなくて、Webサイトを持ってると必ずレンダリングが関わってくるからです。

そしてレンダリングを知ることで効率化できるようにしたいということが一番の理由で、効率化にはブラウザがHTMLドキュメントをレンダリングしたときや表示の最適化をするときにブラウザレンダリングの仕組みが重要だと思ったからです。

 

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

 

WebブラウザはWebサーバーからの情報を受け取ってhtml、css、JavaScript、画像はjpeg、png、gif、svgの情報を解析してコンテンツを画面に表示します。このときブラウザがWebサーバーから受け取る情報は、私たちが見ることができるように情報を成型してブラウザに表示させてます。

データを元にして表示内容を作るのが「レンダリング

そしてブラウザが受け取ったデータをレンダリングするために必要な機械を「レンダリングエンジン」と言います。

ブラウザレンダリングの仕組みで覚えておきたいことはレンダリングに使用するレンダリングエンジンが、どのような流れでレンダリングしてるかです。

まずは大まかな流れとして

 

  1. HTMLをDOMツリーと呼ばれる構造体に変換
  2. レンダーツリーを構成
  3. レンダーツリーをレイアウト
  4. レンダーツリーを描画

 

という一連の流れです。この一連の流れに細かい仕組みが色々と入ってきます。

 

レンダリング前に必要なDOMとCSSOMの変換

 

ブラウザがレンダリングする前のレンダリングエンジンが最初にすることはHTMLドキュメントの解析とCSSの解析をして変換する作業です。

 

 

ブラウザレンダリングの仕組みの中でDOMDOMツリーCSSOMツリーという用語が出てくるのですが、CSSとHTMLをブラウザがレンダリングできるようにするためにHTMLとCSSの構文解析をして内部表現に変換したベース作りをしないと、レンダリングを始められないのでブラウザレンダリングする前の準備のようなものだと考えることができます。

そしてDOMとCSSOMの変換は独立した変換方法に分かれていて、最初にHTMLドキュメントを変換するDOMとDOMツリーが必要になってきます。

 

 

Advertisement

 

 

HTMLドキュメントに必要なDOMとDOMツリーとは

 

DOMとはDocument Object Modelの略で、HTMLドキュメントやXMLドキュメントとプログラムの内容や構文を解析して、その処理の結果をレンダリングするページに組み込むために利用するAPIです。

そしてDOMはDOMツリーというのがあってHTMLドキュメントやXMLドキュメントをツリー構造という集合体にします。

このあたりから少し分からなくなってきたので調べながらになってきたのですが、DOMを解析したツリー構造はDOMツリーと言います。
またDOMツリーの仕組みは全てのDOMが格納されていて、DOMとマークアップは、ほぼ1対1の関係にあります。

1対1のDOMツリーとはどういうものなのかというと下のマークアップと図の仕組みになります。

 

<html>
<body>
 <p>Hello World</p>
 <div><img src="example.png"/></div>
</body>
</html>

 

上のマークアップの場合は

 

 

上図の1対1の関係のようにDOMツリーに変換してレンダリングのベースとして使用することになります。
ブラウザレンダリングはDOMツリーがないとレンダリングができないくらい大切な変換作業です。

 

CSSはCSSOMに変換してブラウザレンダリングする

 

HTMLドキュメントをレンダリング前にDOMツリーに変換するようにレンダリングエンジンはCSSも変換します。

CSSの変換はCSSOMに変換されます。CSSOMはCSS Object Modelの略で変換のイメージをなんとなくわかりやくするには略してないCSSオブジェクトモデルという用語のニュアンスでどんな変換にかイメージしやすくなります。

 

CSSを対象とする

オブジェクト⇒操作の対象となるデータ

モデル⇒型、模型

 

これを合わせると「レンダリングする対象になるデータの型を作る」というイメージです。

そして、なぜCSSがCSSOMに変換が必要なのかというと、ブラウザレンダリングの仕組みの中でCSSコードとエレメントを結び付けるために必要なのと、表現手段のなるものとして必要だからです。

エレメントはhtml要素のこと

私たちが見る実際のWebページの表示もCSSでHTMLの装飾をしてるリソースなのと同じように、ブラウザレンダリングもHTMLドキュメントにCSSを当てていく仕組みなのでCSSOMで内部表現にすることが必要なのです。

リソースとは何かすることに関係する資源のことで、ブラウザレンダリングするときのリソース(資源)はHTMLやCSSですね。

ブラウザレンダリング前のDOMツリーとCSSOMツリーに変換したツリーが使用されるのは最終的にはツリーとツリーを組み合わせることでレンダリングしていきます。レンダリングツリーの構築ができたことで、ようやくレンダリングのレイアウトに進めます。

上記までのブラウザレンダリングする前のDOMツリーとCSSOMツリーを踏まえた上でレンダリングの仕組みの流れを理解していこうと思います。

 

 

Advertisement

 

 

ブラウザがレンダリングする流れを確認

 

ブラウザレンダリングは4つの仕組みに分担されます。

 

 

loadingscrptingrenderringpainting

このブラウザレンダリングの分担してる流れ全部をまとめて「frame」と言います。そして4つの流れの仕組みには、さらに分担されてます。

 

loadingには「Dounload」と「Parse」があります。

HTMLファイル、CSSファイル、JavaScriptファイル、jpeg、png、gif、svg画像ファイルのダウンロードをするのが「Dounlode」の担当。

「Perse」ではloadingでダウンロードしたリソース(資源)をレンダリングエンジンがレンダリングできるようにHTMLファイルはDOMツリーに、CSSはCSSOMツリーにする担当がPerse。

 

 

ScriptingではJavaScriptの実行をJavaScriptエンジンに渡して実行されます。

JavaScriptのコード⇒字句解析⇒トークン列⇒構文解析⇒コンパイル⇒実行可能コード⇒実行

 

 

Renderringでは「CalculateStyle」と「Layout」があります。

レイアウトするためのレイアウト構築をします。

「CalculateStyle」ではCSSが変換されたCSSOMでHTMLのDOMツリーに対してCSSセレクタのマッチングを総当たりで行いながら、CSSルールを元にCSSプロパティが当たるか判断します。

「Layout」ではDOMツリーの要素の視覚的なレイアウトの計算をしてレイアウトを行います。
レイアウトの計算は要素の大きさ、margin、padding、位置、x軸の位置の計算です。

 

 

ここまで来ると残すはPaintingです。

Paintingでは「Paint」Rasterize」「CompositeLayers」があります。先ほどまでやってきた流れの集大成としてレンダリング結果を描画します。

「Paint」で2Dグラフィックエンジンに命令しますが、グラフィックエンジンというのはブラウザによって違う場合があります。

その後に「Rasterize」は命令を元にしてピクセル描画をします。
そしてレイヤーで描画するレイヤーを生成しますが、レイヤーの適用される要素はpositionとかtransdorm、opacityなど位置決めや背景の透明にするスタイルです。

「CompositeLayers」でピクセルにしてレイヤーを合成させてから最後にレンダリングの結果が生成されます。

ちなみに合成するときに、CPU合成とGPU合成がありますが、CSSのtransformプロパティに変形関数をつけたりして条件が合うとGPU合成されます。基本的には2D合成です。

これでブラウザレンダリングの完成です。

この後ブラウザレンダリングをしてみたときの内容も書きたかったのですが、一気に書くと私の脳がレンダリングブロックするので後日やってみます。

Googleカテゴリの最新記事