はじめに
この記事ではウェブページが表示されるまでの流れについて解説します。
HTMLやCSSを学び始めた人にとってすぐに必要な知識ではありませんが、ウェブページが表示されるまでの背景に何が起きているかを知っているとトラブルの解決やウェブページの表示速度の改善等に役立つことがあります。興味がある人は参考にしてください。
この記事の対象者
- ウェブ制作を基礎から学びたい人
- ウェブページがどのように表示されるか知りたい人
- CSSやJavaScriptでトラブルを抱えている人
この記事の目標
- HTTPについて知る
- ウェブページが表示されるまでの流れを知る
- ウェブブラウザがウェブページを描画する手順を知る
クライアントとサーバー、HTTPについて
インターネットに接続しているコンピューターはクライアントとサーバーに分類されます。クライアントとサーバーはHTTPという技術を用いて相互に情報のやりとりを行うことで、閲覧したいサイトの表示などインターネットを使用するユーザーが期待している動作を実現します。
クライアントとは
ウェブサイトの閲覧やアプリケーションの使用等、インターネット上でサービスの提供を受ける側はクライアントに分類されます。
サーバーとは
サービスを提供するコンピューターはサーバーと呼ばれます。サーバーは用途によってたくさんの種類があるので、この記事ではウェブサーバーに関してのみ解説します。
HTML、CSS、画像、動画、音楽、PDFといった、ウェブサイトを構成するファイルを格納したコンピューターをウェブサーバーと呼びます。
HTTPとは
ウェブサイトのURLの先頭には「http://」や「https://」といった記載があります。これは、HTTP（Hypertext Transfer Protocol）に従って通信を行うということを通信相手に伝えています。
HTTPはクライアントとサーバー間の通信を行うための手順を定義しています。クライアントからサーバーに送られる情報をHTTPリクエストといい、要求内容の他にクライアント側の情報やお問い合わせフォームに入力した情報などが含まれます。サーバーからクライアントに送られる情報をHTTPレスポンスといい、クライアントからの要求に対して必要なデータやファイルの種類、時間などの情報を返します。
ウェブページが表示されるまで
普段使用しているときに意識することはありませんが、私たちはGoogole Chrome等のウェブブラウザを利用してウェブサイトの閲覧、ボタン・リンクのクリックやURLの入力などの操作をすることで一度に多くの処理を実行しています。
ウェブブラウザとサーバーのやりとり
ユーザーがリンクをクリックするなどの操作を行うと、ウェブブラウザはDNSサーバーにアクセスを行い、URLのドメイン名をIPアドレスに変換します。また、ウェブブラウザはHTTPリクエストを生成し、これをURLから変換されたIPアドレス先のウェブサーバーに送信します。
DNSとは
インターネットの通信はIPアドレスというコンピューターの住所のようなものを指定して行います。IPアドレスは「000.00.000.00」のように数字のみで表現されているので人間にとっては覚えることが困難です。
この問題を解決するための仕組みがDNS（Domain Name System）です。IPアドレスとURL内のドメイン名の紐付けを行うことで、ドメイン名が記されたURLにアクセスするだけでウェブサーバー等のコンピューターにアクセスができるようになります。
ウェブサーバーはクライアントから送られたHTTPリクエストを読み取り、要求に応じてHTTPレスポンスを返します。
クライアントからのHTTPリクエストの要求がウェブページの表示だった場合、ウェブサーバーは要求されたURLのHTMLファイルをHTTPレスポンスのボディ部分に含みます。
ウェブブラウザは受け取ったHTTPレスポンスを解析し、CSSやJavaScriptファイル、画像の取得などの必要があればウェブサーバーに再度HTTPリクエストを送信します。一度のHTTPリクエストで返されるデータは一つだけなので、ウェブページを表示するときはクライアントとサーバー間で複数回のやりとりを行うことになります。また、ウェブブラウザはサーバーとのやりとりと並行してウェブページを描画するための処理を行っています。
ウェブページが描画されるまでの流れ
ウェブブラウザがウェブページを描画するとき、主に以下のような手順で処理を行います。
- HTML・CSSの解析
- レンダーツリーの構築
- レイアウトの計算
- ウェブページの描画
内容とコーディング時の影響について簡単に説明します。
HTML・CSSの解析
HTMLの解析を行いDOMツリーを構築します。HTMLでマークアップされたタグをDOM（Document Object Model）として扱えるようにすることで、ウェブページを表示するための前準備を行います。
また、HTMLの解析と並行してCSSの解析も行い、CSSOM（CSS Object Model）を生成します。CSSOMはCSSのルールセット毎のスタイル情報が保存されます。
レンダーツリーの構築
DOMとCSSOMは独立したオブジェクトなのでウェブページの描画をすることができません。描画できるようにするためにはCSSOMの構造をDOMに適応させてレンダーツリーを構築します。
レンダーツリーの構築が終わった後にDOMツリーの変更を行う処理が実行された場合や、display: noneが指定された要素に対してdisplayプロパティを変更した場合にレンダーツリーの再構築が行われます。
レンダーツリーの再構築が行われればこの後の処理であるレイアウトの計算や描画も再び実行されるため、パフォーマンスに影響を与えてしまいます。
レイアウトの計算
レンダーツリーの情報からレイアウトを計算していきます。CSSに記述されたwidthやheight、paddingやmarginなどの値が適用されます。
CSSアニメーションでwidthやheightなどレイアウトに関わるプロパティに変更を加えた場合、レイアウトの計算を再度行うことになるので注意が必要です。
ウェブページを表示したとき、画像が表示されると同時にレイアウトがずれるときがあります。これをレイアウトシフトといい、レイアウトの計算後に画像が読み込まれることが原因です。サーバーとのやりとりはウェブページを描画する処理と並行して行われますが、最初にHTMLの解析を行ったときにimgタグに画像サイズの情報が無いとレイアウトの計算時にimgタグの画像分の領域を確保しません。画像の読み込みが終わればその領域を確保しますが、レイアウトの再計算が行われるためパフォーマンスが下がります。対策として、imgタグにwidthとheight属性を指定することで画像のサイズ分の領域を確保できるようになり、レイアウトの計算後に画像が読み込まれてもレイアウトシフトは起きなくなります。
ウェブページの描画
レンダーツリーの情報に基づいてウェブページの描画を行います。
装飾に関わるCSSプロパティのほとんどはこの段階で適用されます。要素のテキストや背景などにアニメーションを加えた場合、その要素は再描画されることになります。レイアウトの計算やレンダーツリーの再構築ほどの影響はありませんが、アニメーションを加える要素の数や大きさ等には気を配る必要があります。
また、配置される要素はスタッキングコンテキストというレイヤー構造を持ち、position: absoluteやfixedなどのプロパティをもつ要素は通常の描画位置から外されます。z-indexを指定した要素が期待通りにいかない場合はスタッキングコンテキストを理解することで原因を特定できるようになります。スタッキングコンテキストに関しては別の記事で詳しく解説します。
最後に
この記事ではウェブページが表示されるまでの流れを大まかにまとめました。以下についておさえておくと良いでしょう。
- ウェブブラウザとサーバー間では関連するファイルの数だけHTTPを用いたやりとりが発生する
- ウェブブラウザはサーバーとのやりとりと並行してウェブページの描画を行っている
- アニメーションを実装するときはどのプロパティを変更するかでパフォーマンスに影響を与える
少し難しく感じたかもしれませんが、HTTPレスポンスの内容やJavaScriptの実行順、ページが表示されるまでのファイルの読み込み順などをイメージするだけでも問題に対しての仮説を立てやすくなるので、初心者のうちから意識しておくことをオススメします。