【5分でわかる！】Webブラウザのレンダリングエンジンの仕組み

読み終えるまでおよそ5分⏰

どうも、ちゃんなるです。

今日はブラウザのレンダリングエンジンの仕組みについてやさーしくまとめます。

現職エンジニアの方々には簡単かもしれないけど、読んでもらえると嬉しいです🙋‍♀️

http://www.shoshinsha-design.com/2016/05/%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%83%95%E3%83%A9%E3%83%83%E3%83%88%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3/.html

次の書籍の内容を参考にしました。

リンク

①まず、ブラウザって？
②Webページがレンダリングされる流れ
③再レンダリング
まとめ
書籍情報

①まず、ブラウザって？

サーバからWebサイトを取得し、画面に表示してくれるアレです。 ChromeとかSafari、Firefox、EdgeのようなWebページを見るためのツールです。

ちなみに、ブラウザの世界シェアはこの順になってます。*1

ブラウザは、与えられたURLからサーバとWebサイトのファイル(主にHTMLファイル)を特定し、ファイルを取得します。WebサイトはHTML、CSS、JavaScript、画像ファイルなどのさまざまな要素で構成されます。

レンダリングエンジンとは、ブラウザの中に入っている仕組みのことで、HTMLをはじめとしたWebサイト構成要素を読み取って、画面上のピクセルに描画する機能を持ちます。メールクライアントに入っていることもあり、それゆえテキストだけでなく綺麗に装飾されたメール（HTMLメール）を使うことができます。（広告メールとかレイアウト綺麗ですよね笑）

②Webページがレンダリングされる流れ

大まかに言うと、4つのパートで構成されます。

Loading→Scripting→Rendering→Painting

Loading: 必要なリソースを集めます。具体的には、HTMLとその内部で参照されているリソースを再帰的に取得し、ブラウザ内部で扱いやすい形式に変換します。
- ちなみに、HTMLはDOMツリー、CSSはCSSOMツリーという形式に変換されるようです。*2

Scripting: JavaScriptを実行します。場合によってはDOM要素を書き換えることがあります。
Rendering: 画面の表示に必要な要素を計算して求めます。
- まず、全てのDOM要素に対し、適用されるCSSを決定します。
- その後、適用される全てのCSSの視覚的なレイアウト情報の計算をします。（フォントサイズが○○で、ボックス幅が△△で〜のようなイメージ）
Painting: 実際に画面に描画します。（描画はレイヤーごとに分けて行われ、最終的にはレイヤーを重ね合わせて描画完了となるそうですが、レイヤーに関しては省略しますmm）