More than 3 years have passed since last update.

【JavaScript】ブラウザのレンダリングの仕組みについて

Last updated at 2020-01-27Posted at 2020-01-12

経緯

仕事で、フロント側のパフォーマンスチューニングをすることになりました。
当たり前ですが、フロントエンドのパフォーマンスチューニングを行うためには、ブラウザのレンダリングの仕組みについて理解する必要があります。
今回は、ブラウザのレンダリングの仕組みについて調べたことをまとめてみました。

大きく分けて、4つで構成されています。

リソースをダウンロードして、HTMLを解釈し、DOMの構造に落とし込んで行きます。
ここでいうリソースは、HTML、CSS、JS、画像ファイル(JPEGなど)のことを指しています。

細かく分解すると下記のような流れになります。

URLを元にリソースをダウンロードしてきます。
ダウンロードする際に使用する、ネットワークプロコトルに関しては、TCP/IPを使用します。

ダウンロードするまでの流れとしては下記のようなイメージです。

HTMLを解釈して、DOMを構築します。
ブラウザはこの構築したDOMツリーを元にレンダリングを行なっていきます。
またここではCSSのDOMのようなツリーを構築します。(CSSOM)

レンダリングツリーの構築、レイアウト、ペイントより引用

Javascriptの実行をここで行います。
具体的には、JSのコードをJSエンジンに引き渡して実行します。

Layout Treeを構築していきます。
処理は主に2つ実行されます。

DOM要素に対して、どのようなCSSが割り当てられるかを計算します。
簡単にいうと、DOMとCSSOMをマッチングさせていると理解しています。

何を計算するのか
マッチングの時に必要な処理の計算のことを指している。(具体的なことは掘ってません.....)
あとレンダリングエンジンは、右から左に解釈していく。

レイアウト情報の計算を行います。
レイアウト情報には、要素の大きさ、要素のマージン、パディング、要素の位置などが含まれます。

最終的にDOMとCSSOMをあわせたLayout Treeが出来上がります。

レンダリングツリーの構築、レイアウト、ペイントより引用

最後に描画に移行します。
具体的には、要素とスタイルをそれぞれのピクセルに落としこむ作業をしていきます。