ブラウザレンダリングのしくみ
Web全般
2021.5.6

レンダリングの前に

ユーザーがWebブラウザにURL入力すると、ブラウザはURLをもとに指定のサーバーへTCP/IPプロトコルに基づいてリクエストを送り、サーバーからレスポンスが返ってくる

レスポンスとして受け取ったHTML,CSS,JavaScriptをどう表示するのか？=レンダリング

この工程は、critical rendering pathと呼ばれている

DOM（Document Object Model）ツリー構築

1-1.ブラウザはディスクやネットワークからHTMLのバイトを読み取り、utf8などの文字コードに応じて<html>や<head>のような文字列に変換

1-2.取得した文字列をトークンに変換

1-3.トークンを<html>や<head>といったオブジェクトに変換（字句解析）

1-4.オリジナルのマークアップの定義に基づいた親子関係をもつ木（ツリー）構造に整形

CSSOM（CSS Object Model）ツリー構築

ブラウザでDOMを構築している際にドキュメントのheadタグで外部のcssスタイルシートを参照しているlinkタグに遭遇すると、ブラウザはページのレンダリングにこのリソースが必要であると解釈してこのリソースに対するリクエストを即座にディスパッチし、CSSを受け取る

⚠HTML parseの途中でJSに出会うとHTML Parsing を見合わせる

DOMツリーとCSSOMツリーを合成してレンダーツリーを生成

ページの描画に使われる全てのDOMと個々のオブジェクトに使われるCSSをそれぞれ組み合わせる

デバイスのviewport内でそれら要素（Node）の厳密な位置やサイズを算出するレイアウトの工程（リフロー）

レイアウトプロセスで得ることができた個々の要素のサイズと位置情報を最終的な正確なピクセル値へと変えるペイント(又はラスタライゼイション)の行程

Megumi Tanimoto

Editor

フロントエンドエンジニア１年目。
エンジニアライフ、技術的なアウトプットを中心に発信します。