HTMLファイルの実行順序

注: 以下はMicrosoft365 Copilotに質問した結果であり、仕様を確認したものではありません

HTML、CSS、JavaScriptの実行順序:

HTMLの解析: ブラウザはまずHTMLを解析してDOM（Document Object Model）を生成します。
CSSの適用: 次に、CSSを読み込み、DOMにスタイルを適用します。
JavaScriptの実行: JavaScriptはその位置に依存して実行されます。
通常、<script>タグがHTMLのヘッドにある場合は、HTMLの完全な解析が完了する前に実行されます。
HTMLのボディの最後にスクリプトを配置することで、ページの読み込みが完了してからスクリプトが実行されるようにすることが一般的です。

JavaScriptには2つの重要な属性があります：

defer: HTMLの解析が完了した後にスクリプトを実行します
async: スクリプトが読み込まれるとすぐに実行します。これはHTMLの解析をブロックすることがあります。

CSSファイルとscriptファイルの読み込みの実行順序

CSSの読み込み:
• <link>タグを使って外部CSSファイルを読み込む場合、ブラウザはHTML解析の途中でCSSを読み込みます。
• CSSは非同期に読み込まれるため、HTML解析をブロックしません。
• CSSの適用が完了する前にページが表示されることを防ぐために、CSSの読み込みは優先されます。
JavaScriptの読み込み:
• <script>タグを使って外部JavaScriptファイルを読み込む場合、ブラウザはデフォルトでHTML解析をブロックしてJavaScriptを読み込み、実行します。
• defer属性を使うと、JavaScriptファイルは非同期に読み込まれ、HTMLの解析が完了した後に実行されます。
• async属性を使うと、JavaScriptファイルは非同期に読み込まれ、読み込みが完了した時点で実行されます（HTMLの解析を中断する可能性があります）。

Javascriptで<head>に<link>を入れた場合

JavaScriptを使って<head>要素に<link>を追加することは可能です。
その場合、動的にCSSを読み込むことができます。

例えば、JavaScriptが<head>要素に<link rel="stylesheet" href="styles.css">を動的に追加します。
この操作はHTMLが完全に解析された後に行われるため、ページの初期ロードには影響を与えません。
しかし、スタイルの適用は<link>要素が追加された後に行われるため、その時点で適用されます。

CSSを追加する<script>が、HTMLの途中にある場合

もしJavaScriptで<link>要素をHTMLの途中（例えば、ボディ内）で追加する場合、以下のことが起こります。

HTMLの解析と実行:
• ブラウザはHTMLを上から下へ解析します。
• 途中にある<script>タグが実行されます。
CSSの追加と適用:
• JavaScriptが<link>要素を動的に作成し、<head>要素に追加します。
• その時点でCSSが読み込まれ、適用されます。

ただし、ここで重要なのは、CSSが追加されるまでの間は、そのCSSによって定義されるスタイルが適用されないことです。これはページの一部が異なるスタイルで一瞬表示される「FOUC」（Flash of Unstyled Content）と呼ばれる現象を引き起こすことがあります。

ユーザー体験を考慮すると、できるだけ早い段階でCSSを読み込むようにするのがベストです。もし動的にスタイルを変更したい場合は、JavaScriptの実行タイミングや方法を工夫することが推奨されます。