html、css、js ファイルの読み込み順序と実行

今日本を読んでいて、html、css、jsの読み込みと実行を見て、30分ほどオンラインで調べましたが、まだ理解できませんでした。その時、私は突然次のような文章を見つけました:

HTML ページの読み込みと解析のプロセス

1. ユーザーは URL を入力します (これが HTML ページであり、初めてアクセスすると仮定します)。ブラウザはサーバーにリクエストを送信し、サーバーは HTML ファイルを返します。

2. ブラウザは HTML コードの読み込みを開始し、

タグ内に外部 CSS ファイルを参照する タグがあることを確認します。

3. ブラウザが CSS ファイルのリクエストを再度送信し、サーバーが CSS ファイルを返します。

4. ブラウザは HTML の

部分のコードを読み込み続け、CSS ファイルが取得され、ページが表示されます。

5. ブラウザは、画像を参照するコード内で タグを見つけ、サーバーにリクエストを送信しました。この時点で、ブラウザは画像がダウンロードされるまで待機せず、後続のコードのレンダリングを続行します。

6. サーバーは画像ファイルを返します。画像は特定の領域を占め、後続の段落の配置に影響を与えるため、ブラウザはコードのこの部分に戻って再レンダリングする必要があります。

7. ブラウザは JavaScript コード行を含む <script> タグを見つけました。すぐに実行します。 </script>

8. Javascript スクリプトはこのステートメントを実行し、コード内の特定の

9. 最後に の到着を待ったところ、ブラウザが突然泣き出しました...

10. 待って、まだ終わっていません。ユーザーはインターフェイスの [スキン変更] ボタンをクリックしました。 Javascript がブラウザに変更を要求しました。 タグの CSS パスを確認してください。

11. ブラウザは出席者全員に「全員荷物をまとめてください。最初からやり直さなければなりません...」と呼びかけ、ブラウザはサーバーに新しい CSS ファイルの作成とページの再レンダリングを要求します。

要約: 1. 一般的に、HTML ドキュメントの順序で読み込まれます

2. すべての HTML コンテンツの後に内部または外部 JS ファイルを配置することも最適です。これにより、ユーザーはページの読み込み速度が速くなったと感じますすぐに速度が低下します。そうでない場合、外部ファイル (CSS および JS を含む) へのすべての参照を

に配置すると、ページのコンテンツが実行される前に、すべての JS コードがダウンロード、解析、実行されるまで待たなければならないことになります。これにより、ページのレンダリングに大幅な遅延が発生し、遅延中はブラウザ ウィンドウが空白になります。

以上がhtml、css、js ファイルの読み込み順序と実行の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。