ページを表示するブラウザの仕組み
Webブラウザは、Webサーバと通信し、HTTPで送られたHTMLデータを基にページをレイアウトするソフトといえる。では、ブラウザを起動してからページが表示されるまで、ブラウザはどのような処理を行なっているかを見てみよう(図4)
まず、Webブラウザが起動すると、スタートページとして登録されているURLが読み出され、該当するWebサーバにHTTPリクエストとして送信される(図4の(1))。するとWebサーバからHTMLファイルが送られてくる。この時点で送られてくるのは、このHTMLファイルのみであり、Webページを構成する画像ファイルなどのそのほかのリソースは、まだ受信しない。
HTMLファイルを取得したブラウザは、HTMLファイルの解析を行なう(図4の(2))。この解析は、パース(Parse)とも呼ばれ、字句解析や意味解析といった複数の工程からなる。
最初に行なうのが、HTMLファイルの先頭部分にあるhead要素の解析だ。head要素には、
- HTMLの記述に使っている文字コードや文字セット
- ページ読み込み中、描画前に実行されるスクリプト
- レイアウト情報などを定義するスタイル(CSSなど)
- 外部リソース(別ファイルとしてWebサーバで公開されているCSSファイルやスクリプトファイル)
といった情報が入っている(画面1)。
図4では、外部リソースのリクエスト(図4の(3))とスクリプトの実行(図4の(4))を便宜的に分割している。しかし、head要素にスクリプトが記述されていれば、外部リソースのリクエストの前に実行される。そのため、Webブラウザのバージョンを判別するスクリプトをhead要素に記述し、そのバージョンに応じたCSSファイルを読み込むといった手法もよく使われる。
head要素の解析と実行が完了すると、CSSファイルやスクリプトファイルといった外部リソースが読み込まれ、並行してHTMLファイルのbody要素(あるいはframeset要素)が解析される。この過程で、ページに張り込まれた画像やSWFファイルといった外部リソースへのリクエストが、Webサーバへと送信されることになる。ただし、画像などの外部リソースは、HTMLファイル内だけでなく、CSSファイルでも指定されることがある。そのため、
- CSSファイルやスクリプトファイルの解析と実行
- HTMLファイルの解析
- リソースの取得
の3作業は、並行して処理される。
リソースの取得が完了すると、各HTMLの要素が画面要素として生成され、要素のレイアウトが作成される(図4の(5))。この描画段階を「レンダリング」と呼ぶ。描画段階では、たとえばFlash PlayerやJavaアプレットといったプラグイン(外部プログラム)の描画領域が確定され、これに対応するSWFファイルやJARファイルの読み込みが行なわれる。これらは読み込みが終わった段階で実行されるが、ほぼ同時に描画されたHTMLの各要素の状態が非表示から表示へと変更される。この段階で、JavaScriptで制御された動的なコンテンツ以外の表示で必要な処理が完結し、WebブラウザにWebページが表示されるのだ。
ただし、描画はされたものの画面表示されない場合もある。特殊な例だが、視覚障害者のために作られた音声ブラウザなどは、画面表示ではなく、「読み上げ」が表示プロセスに相当すると考えればよい。いずれにせよ、表示プロセス前にレンダリング(描画)されることに変わりはない。
ブラウザが送信する情報
Webブラウザは、HTTPをおもに扱うクライアントソフトである。そこで、HTTPとWebブラウザのかかわりを少し述べておこう。図4の(1)でWebサーバにHTTPリクエストを送信しているが、その際に送信するのはURLだけではない。Webブラウザの種類や対応する文字コード、ヘッダの状態といった情報(メタ情報)なども、WebブラウザはWebサーバに通知している。これらの情報をHTTPリクエストヘッダと総称している。
Webサーバに送信されたメタ情報は、Webサーバ内で環境変数やアプリケーションへのパラメータとして利用される。Webサーバで、CGIやASP(Active Server Pages)といったサーバ側で動作するアプリケーション(サーバサイドプログラム)があるとする。すると、そのWebサーバでは、リクエストヘッダの内容から処理を分岐したり、バックエンドにあるデータベースにアクセスする際の検索キーワード(クエリ)にするといった用途でメタ情報を利用する。
一方、レスポンスを返す際には、Webサーバはリクエストヘッダに応じて処理した結果のリソースをクライアントに対して返却し、クライアントとの接続を処理する。たとえば「/index.html」をリクエストされた場合でも、リクエストヘッダ中のUser-Agent情報を基に、IEからの要求かFirefoxからの要求か、あるいは携帯電話からの要求か、といったクライアントの種別を判定して、適したコンテンツを返すという処理に応用されている。
また、リクエストにも付随情報としてリクエストヘッダが存在したのと同様、Webサーバから返ってくるレスポンスにも付随情報が存在する。その1つが、更新情報である。更新情報とは、リクエストされたコンテンツが最後に変更された時間だ。コンテンツの最終更新時間がWebブラウザの持つキャッシュの時刻よりも新しければ、キャッシュが破棄され、コンテンツを再取得する。もし最終更新時間がキャッシュと同じなら、再取得を行なわないため、サーバとの通信量を軽減できる。通信量の軽減はWebサーバの負荷軽減にも直結するため、重要なレスポンスヘッダである。
このように、WebブラウザとWebサーバの間では、リソースのリクエスト以外の情報がヘッダとして送受信されている。ヘッダ情報として送受信されるメタ情報によって、Webページが成り立っているともいえるのだ。
(次ページ、「プラグインとアドオン」に続く)
この連載の記事
-
第8回
ネットワーク
どうして携帯電話でインターネットできるの? -
第7回
ネットワーク
Webにまつわる危険をきちんと知っていますか? -
第6回
ネットワーク
ブラウザとサーバは何をやりとりしているの? -
第5回
ネットワーク
高度なWebアプリケーションを実現するRIAの仕組み -
第4回
ネットワーク
HTMLからXMLへ!Webを彩るコンテンツを知ろう -
第3回
ネットワーク
今さら聞けないWebサーバの役割と機能 -
第1回
ネットワーク
Webブラウザから拡がる楽しい世界 -
ネットワーク
WWW完全制覇 - この連載の一覧へ