KaQiita

新米エンジニアが適当なことを書いてます。温かく見守ってやってください。

Render Tree 構築

はじめに

以下の「アドレスバーに URL を打ち込んでからページが表示されるまで」の記事のステップ5の記事です。

www.kaqiita.com

今までのステップのおさらい

まずはブラウザがサーバーにリクエストを送るために通信コネクションを確立する必要がありました。

そこで「DNS による名前解決」によってブラウザに打ち込まれた URL を IP アドレスに変換をした後、「3Way-Handshake」という手法で TCP 通信コネクションを確立しました。

その後、通信を万が一傍受されても安全なように TLS という手法で通信を暗号化して送る準備をしました。

準備完了後にブラウザからサーバーにリクエストを送り、そのレスポンスとして HTML ファイルが返ってくるのでした。

今ステップで行うこと

今回のステップで、いよいよブラウザにページが表示されます。

それもただ文字が表示されるだけでなく、スタイルが当たっていて、かつ画像なども含んだ Web ページが表示されます。

そのような Web ページを表示するために、ブラウザが構築する Render Tree というものをこのステップでは見ていきます。

Render Tree とは

Render Tree とはブラウザに「何を」「どのように」表示するかを記述したものです。

Render Tree は「何を表示するのか」が記述された DOM Tree と「どのように表示するのか」が記述された Style Tree が合わさったものとなります。

DOM Tree は HTML ファイルをパースして作成されるもので、Style Tree は CSS ファイルをパースして作成されるものです。

Render Tree の構築

Render Tree の構築の流れは以下の通りです。

f:id:KakkiiiiKyg:20190924055954p:plain

前ステップでブラウザからサーバーにリクエストを送った際に HTML ファイルがレスポンスとして返ってきました。

ブラウザはその HTML ファイルを上からパースして DOM Tree を作成します。

その際にパースしている途中で CSS が当てられていることを検知するとサーバーに再度リクエストを送り、 CSS を要求します。

サーバーからレスポンスとして CSS ファイルが返ってくると、今度は CSS ファイルをパースして Style Tree を作成します。

その作成した DOM Tree と Style Tree をマージして最終的に Render Tree を作成してページを表示します。

因みに、HTML ファイルをパースしている途中で画像などのサブリソースがページにあることを検知すると、またブラウザはサーバーにそのサブリソースを要求するリクエストを送ります。

なので1ページを表示するためにブラウザがサーバーに送っているリクエストの数は1つではありません。

「HTML ファイル + サブリソースの数」分のリクエストを送っています。

終わりに

ここまでがステップ5の流れです。

このステップまででページの表示が完了しました。

次が最後のステップです。