ちゃんなるぶろぐ

新卒エンジニアが、日々の学びをアウトプット〜読書とプログラミング〜

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

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

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

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

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

f:id:Chan-Naru:20220223093240p:plain
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サイトを取得し、画面に表示してくれるアレです。 ChromeとかSafariFirefox、EdgeのようなWebページを見るためのツールです。

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

f:id:Chan-Naru:20220223094017p:plain
ブラウザの世界シェア 2021年1月〜2022年1月

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

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

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

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

Loading→Scripting→Rendering→Painting

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

f:id:Chan-Naru:20220223095328p:plain
ブラウザの内部表現の形式

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

③再レンダリング

②までは、初期画面表示の話です。

Webページには、ボタンや入力フォームなどのコンテンツがあり、ユーザの操作によって画面が変わったりしますよね。その際に起こるのが再レンダリングです。

Webコンテンツがユーザによって使用される(=DOMイベント発生)→Scripting→Rendering→Painting

と、再度レンダリングのフローが走るのですね。

ちなみに、全ての要素が再計算されるわけではありません(再計算不要なものは再利用されます)。

まとめ

ブラウザと、ブラウザがWebページを表示する際に行われている処理をざっくり解説しました。

『Loading→Scripting→Rendering→Painting』です。

「大体こんな感じで動いているんだなぁ〜」と知ることで、今後のプログラミングに生きるかもしれません(知らんけど)。

不適切な表現や間違った部分があれば、厳しくご指摘お願いします!

書籍情報

Webフロントエンドハイパフォーマンスチューニング Webサイト・アプリケーションを徹底的に高速化 [ 久保田光則 ]

価格:2,948円
(2022/2/23 09:30時点)
感想(0件)

  • 【書籍名】Webフロントエンドハイパフォーマンスチューニング Webサイト・アプリケーションを徹底的に高速化
  • 【著者名】久保田光則
  • 【出版社】技術評論社
  • 【出版日】2017年6月
  • 【ページ数】337