webアプリケーションのレンダリング過程

はじめに

　本記事は、webアプリケーションを提供するサーバーとwebブラウザ間の通信過程を
　調べてまとめたものです。

　具体的な内容は、まずwebアプリケーションアーキテクチャ節でwebアプリケーション側
　の構成形式とブラウザとの通信過程を説明します。次に、レンダリング節でやり取りする
　HTMLファイルの生成方式とそれをブラウザに描画する過程を説明します。

webアプリケーションアーキテクチャ

　webアプリケーションとブラウザのやり取りを確認していきたいので、
　ここで説明するアーキテクチャの定義は、アプリケーション全体ではなく
　フロントエンド部分のみを指します。

Multi Page Application(MPA)

とは？
　webアプリケーションが複数のページで構成されている形式。
　個々のページはそれぞれ独立して存在しているため、別ページにアクセスすると
　そのページがロードされて画面全体が切り替わる(遷移する)。
通信の流れ
　つまり、ブラウザからのリクエストのたびにwebサーバーはリソース(HTML, CSS,
　JavaScript)をレスポンスし、ブラウザはそれらを取得し画面に表示する。
検索エンジンへの影響
　ページ毎のコンテンツを検索エンジンが収集しインデックス登録¹することで、
　コンテンツに関連するワードの検索結果に表示されやすくなる。

Single Page Application(SPA)

とは？
　webアプリケーションが1つのページで構成されている形式。
　Ajaxによってページを部分的に更新することで、1つのページでコンテンツを提供する。
　そのためページ遷移が発生しない。
通信の流れ
　クライアントが初めてwebアプリケーションサイトを訪れた時に、ページを表示するのに
　必要なリソースをwebサーバーがレスポンスする。それ以降の通信は、ブラウザではなく
　JavaScriptがAPIサーバーと非同期に行う。JavaScriptはサーバーから必要なデータを取
　得すると、DOM APIを使用してページの対象部分に反映させる。
読み込み時間
　ページ遷移が発生しないことでCSSやJavaScriptなどリソースを再ロードする必要がない
　ため、操作に対する結果表示が高速である。一方、訪問時は全リソースをロードするため
　読み込みに時間が掛かる。
検索エンジンへの影響
　ページ内のコンテンツが動的に変化するため、検索エンジンに正しく情報が収集されない
　可能性がある。

Ajaxとは
　JavaScriptが非同期的にサーバーと通信を行う仕組み。
　XMLHttpRequestを使ってXMLでやり取りする。
XMLHttpRequest
　JavaScriptがサーバーとHTTP通信を行うための組み込みオブジェクト(API)。
XML
　タグを使って文章の見た目や構造を記述するためのマークアップ言語。
　データをやり取りする際の形式として利用される。
通信の流れ
　JavaScriptがAPIサーバーにHTTPリクエストを送信すると、XML形式のデータが
　レスポンスされる。JavaScriptはそれをDOM APIを使ってページ内の対象となる
　部分に反映させる。
DOM API
　HTMLやXMLなどで記述されたドキュメント内にある要素や属性、テキストを
　それぞれオブジェクト(ノードと呼ばれる)として扱い、全体をツリー構造で
　管理するデータモデルをDOMという。
　DOM APIはドキュメント内のオブジェクトを、プログラムからアクセスし操作
　するためのプロパティやメソッドのこと。

Ajaxの定義
　上記の説明は従来のものであり、現在は必ずしも同じ技術を組み合わせてAjaxを
　実現しているわけではありません。例えば、XMLHttpRequestの代わりにFetch
　が、データ形式がXMLではなくJSONが利用されるといった様にです。

現在はAjax関連技術としてXMLHttpRequestを全く使わないプログラムまでが取
り上げられるようになっており、JavaScriptを効果的に使用して動的なWebサイ
トを作る手法全般をAjax関連と広く捉える傾向も巷に存在する。
　　　　　　　　　　　　　　　　　　　　　　　　　　　　出典：Wikipedia

　つまりJavaScriptで非同期通信を実現する、という広義の意味でAjaxという用語が
　使用されているようです。

レンダリング

　レンダリングには2つの意味がある。
　１つ目はHTMLファイルを作成すること、2つ目はHTMLファイルを画面に描画すること。

1.HTMLファイル作成

　必要なデータを取得しそれをHTMLに埋め込んで生成すること。
　レンダリングのタイミングによって以下の方式がある。
Client Side Rendering(CSR)
　レンダリング処理をクライアントが行う方式。
　クライアントは、サーバーから最低限のHTML, CSSとレンダリングに必要な情報が記述
　されたJavaScriptをレスポンスする。そして、それを元にクライアントがレンダリング
　を行う。SPAは一般的にこの方式です。
Server Side Rendering(SSR)
　サーバーがレンダリングを行う方式。
　リクエストに対してサーバーは、レンダリングを行い結果をレスポンスする。
　MPAは一般的にこの方式です。
Static Site Generator(SSG)
　サーバーが事前にレンダリングを行っておく方式。
　クライアントのリクエストに対して静的ファイルをレスポンスする。
　ビルド時にレンダリングを行うため、コンテンツが更新されるとビルドし直す
　必要がある。

2.画面に描画

　ブラウザがサーバーから受け取ったリソースを画面に描画すること。
　ブラウザのレンダリングエンジンが以下の流れで行う。
DOM構築
　HTMLファイル内のコードをタグ、テキスト、コメントなど役割に応じて１２種類に
　分解し、それぞれをオブジェクト(ノード)として扱う。オブジェクトには、事前に
　その種類ごとの独自のメソッドやプロパティが定義されている。そして、それらの
　親子関係(ネスト)をツリー構造として管理する。
DOMで管理する理由
　DOMとしてHTMLファイルを管理する理由は、外部プログラム(主にJavaScript)が操作
　できるようにするためである。
CSSOM構築
　CSSのlinkタグがある場合、DOM構築と並行してCSSOM(CSS Object Model)が構築される。
　CSSOMは、各CSSセレクターやプロパティの親子関係をツリー構造にしたもの。
JavaScript実行
　ブラウザがHTMLファイル内でJavaScriptのscriptタグを発見すると、DOMやCSSOM
　構築を中断しブラウザに搭載されているJavaScriptエンジンがJavaScriptをコンパイル
　し実行する。
Renderツリー構築
　DOMとCSSOMを組みあわせて構築する。
レイアウト
　ブラウザが、viewport(表示領域)内での各ノードの位置やサイズを計算する。
ペインティング
　結果を描画する。

参考文献

・medium.com(2016). 「MPA」. https://medium.com/@NeotericEU/single-page-application-vs-multiple-page-application-2591588efe58, (参照 2024-11-11).
・wikipedia(2024). 「SPA」. https://en.wikipedia.org/wiki/Single-page_application,
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　(参照 2024-11-11).
・wikipedia(2024). 「DOM」. https://ja.wikipedia.org/wiki/Document_Object_Model,
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　(参照 2024-11-11).
・Zenn(2024). 「ブラウザレンダリングの仕組み」. https://zenn.dev/ak/articles/c28fa3a9ba7edb, (参照 2024-11-11).
・Zenn(2022). 「何度調べてもわからないDOMに決着をつける」. https://zenn.dev/antez/articles/b6eb22cb228a49, (参照 2024-11-11).
・MDN Web Docs(2024). 「CSS Object Model」. https://developer.mozilla.org/ja/docs/Glossary/CSSOM, (参照 2024-11-11).
・Wikipedia(2024). 「Ajax」. https://ja.wikipedia.org/wiki/Ajax, (参照 2024-11-11).

1. 検索エンジンのデータベースにwebページ内の情報を格納する ↩