webページが表示されるまでの大まかなな流れ

Posted at 2024-08-29

HTML,CSS,JavaScriptそれぞれの役割

HTML:
ページの構造を定義し、ブラウザはこれを解析してDOMツリーを構築します。

CSS:
ページの見た目を定義し、ブラウザはこれを解析してCSSOMツリーを構築し、スタイルを適用します。

JavaScript:
ページの動作を定義し、DOMの操作やユーザーインタラクションに応じた動的な動作を実現します。

レンダリング:
これらの要素を統合して、ブラウザはページをレンダリングし、最終的に画面に表示します。

HTMLの解析とDOMツリーの構築

HTMLの解析:
ブラウザは、最初に受け取ったHTMLファイルの内容を解析(parse)し始めます。解析中にHTMLタグを順次処理し、各要素（タグ）をメモリ上に構築します。
DOMツリーの構築:
HTML要素が解析されると、それに基づいてDOM（Document Object Model）ツリーが構築されます。DOMツリーは、HTMLドキュメントの階層構造を表現したもので、ブラウザがページのコンテンツを理解するために使用します。

CSSの解析とスタイルの適用

CSSファイルの取得:
HTMLファイル内の<link>タグや<style>タグによって指定されたCSSファイルが、追加のHTTPリクエストを通じてサーバーからダウンロードされます。
CSSの解析:
ブラウザはCSSファイルを解析し、各HTML要素にどのスタイルを適用するかを決定します。これにより、CSSOM（CSS Object Model）という別のツリーが構築されます。
DOMとCSSOMの統合:
DOMツリーとCSSOMツリーが結合され、レンダーツリーが生成されます。レンダーツリーは、ブラウザがどの要素をどのように表示するかを決定するための構造です。

JavaScriptファイルの取得:
HTMLファイル内の<script>タグによって指定されたJavaScriptファイルが、必要に応じてサーバーからダウンロードされます。
JavaScriptの解析と実行:
ブラウザのJavaScriptエンジンが、ダウンロードされたJavaScriptファイルを解析し、コードを実行します。
JavaScriptはDOMやCSSOMにアクセスして変更を加えることができます。

もしJavaScriptがHTMLの解析(parse)中に実行されると、HTMLの解析(parse)が一時停止され、JavaScriptが完了した後に再開されます。

このため、<script>タグを適切に配置しないと、ページの表示が遅くなる可能性があります。