レンダリングについて（学習用）

レンダリングとは

指定したリソースをブラウザ画面に表示すること

レンダリングのフェーズ

大きく分けて4つのフェーズがある
Loading: レンダリングをするのに必要な、HTML、CSS、JavaScriptなどを読み込む、
一番最初に読み込まれるファイルはHTMLファイル。そのファイルを解析してDOMツリーを作成する。
Scripting: JavaScriptのコードが実行される.
Rendering: DOMとCSSOMツリーは組み合わされてレンダーツリーを形成します。レンダーツリーは、表示されるすべての要素（テキストノード、色、スタイルなど）を含むが、表示されない要素（たとえば、display: none;で設定された要素）は含まれない。その後、ブラウザは各ノードの位置とサイズを計算する。これを「リフロー」とも呼ぶ。
Painting: 最後に、ブラウザはレンダーツリーに基づいて画面上にピクセルを描画する。これは、テキスト、色、画像、境界線などを含み、ペイントプロセスは、しばしば複数の層にわたって行われる。

SPAのレンダリング

1. 初期リクエストの送信
2. 初期HTMLとCSS、JavaScriptをサーバーから取得し、ブラウザに返す。
3. ブラウザはHTMLをロードした後、JavaScriptを解析して、最初のビューを描画する。
4. ２回目以降のリクエスト（差分の更新に必要なデータ）
5. サーバー側でJSON形式のデータを用意して、ブラウザに返す。
6. JavaScriptはブラウザのDOMを操作し、初期ビューに対応するコンテンツを生成。これには、フレームワーク（React、Vue.js、Angularなど）のレンダリングシステムが使用される。

SPAすごい！！