HTML ドキュメント内の </code> タグの配置は、HTML コンテンツのレンダリングに関連した JavaScript の実行タイミングに大きな影響を与えます。 このガイドでは、4 つの主要なアプローチを検討し、その実行プロセスと最適な使用例を詳しく説明します。</p> <p><strong>1. <code><script></code> <code><head></code></strong></p> 内のタグ <pre><code class="language-html"><head> <script> // JavaScript code here Script in Head Hello, World! 実行プロセス: ブラウザは HTML ドキュメントを上から下に解析します。 </code> 内で <code><head></code> タグが見つかると、スクリプトのダウンロードと実行中に HTML レンダリングが一時停止します。</li> <li>スクリプトの実行後、ブラウザは HTML 処理を再開します。</li> </ol> <p><strong>欠点:</strong></p> <ul> <li>スクリプトが大きいか読み込みが遅いと、ページのレンダリングが遅れ、画面が空白になる可能性があります。</li> <li>このスクリプト内で DOM 要素を操作しようとすると、要素がまだロードされていないために失敗する可能性があります。</li> </ul> <p><strong>理想的な使用例:</strong></p> <ul> <li>分析や構成コードなど、すぐには必要ない機能を含むスクリプト。</li> </ul> <p><strong>2. <code><script></code><code><body></code></strong> の最後にある </p> タグ <pre><code class="language-html"><title>Script at Bottom</title> <h1>Hello, World!</h1> <script> // JavaScript code here 実行プロセス: ブラウザは HTML コンテンツ全体をロードしてレンダリングします。 </code> の末尾にある <code><body></code> タグは、ページのレンダリング後に処理および実行されます。</li> </ol> <p><strong>利点:</strong></p> <ul> <li>スクリプトの実行前に HTML の読み込みが完了していることを確認します。</li> <li>レンダリングの遅延を防ぎ、ユーザー エクスペリエンスを向上させます。</li> <li>DOM 要素はすぐに操作できます。</li> </ul> <p><strong>欠点:</strong></p> <ul> <li>完全な HTML レンダリング後に JavaScript の実行が発生するため、ページの読み込み時間がわずかに増加しました。</li> </ul> <p><strong>理想的な使用例:</strong></p> <ul> <li>ページ コンテンツと対話するスクリプト (イベント リスナー、要素の変更など)。</li> </ul> <p><strong>3. <code><script></code> <code>async</code> 属性のタグ</strong></p> <pre><code class="language-html"><head> <script async src="script.js"> Script with Async Hello, World! 実行プロセス: ブラウザは HTML を順番に読み込みます。 async スクリプトが見つかると、HTML の読み込みを続行しながら、同時にスクリプトをダウンロードします。 ダウンロードされると、スクリプトはすぐに実行され、レンダリングが一時停止され、HTML の読み込みが再開されます。 利点: ノンブロッキング: ページのレンダリングを遅らせることなく、スクリプトの読み込みがバックグラウンドで行われます。 並列ダウンロードによりページの読み込みが高速化されます。 欠点: 複数の async スクリプトが存在する場合、スクリプトは予期しない順序で実行される可能性があります。 HTML 構造に依存するスクリプトは途中で実行され、エラーが発生する可能性があります。 理想的な使用例: 他のスクリプトや HTML 要素に依存しない、分析、広告、ソーシャル メディア ウィジェットなどの独立したスクリプト。 4. </code> <code>defer</code> 属性のタグ</strong></p> <pre><code class="language-html"><head> <script> // JavaScript code here Script in Head Hello, World! 実行プロセス: ブラウザは HTML を順番に読み込みます。 defer スクリプトは HTML と同時にダウンロードされますが、実行されるのは HTML 全体が解析された後です。 実行は DOMContentLoaded イベントの直前に行われます。 利点: ページの読み込みが完了した後にスクリプトが実行されるようにします。 複数の defer スクリプトが使用される場合、スクリプトの実行順序を維持します。 完全に利用可能な DOM に依存するスクリプトに適しています。 理想的な使用例: 完全にロードされた後に DOM を操作するスクリプト。 比較表 メソッド 実行時間 ブロックのレンダリング ベストユースケース Method Execution Time Blocks Rendering Best Use Case </code> in <code><head></code> </td> <td>Before HTML load</td> <td>Yes</td> <td>Configuration, early execution logic</td> </tr> <tr> <td> <code><script></code> at end of <code><body></code> </td> <td>After HTML load</td> <td>No</td> <td>DOM manipulation, event handling</td> </tr> <tr> <td><code><script async></code></td> <td>When script is downloaded</td> <td>No (except during execution)</td> <td>Analytics, ads, independent scripts</td> </tr> <tr> <td><code><script defer></code></td> <td>After HTML parse</td> <td>No</td> <td>DOM-dependent scripts</td> </tr> </tbody> </table> で <p></p> </td> <td>HTML ロード前</td> <td>はい</td> <td>設定、初期実行ロジック</td> </tr> <tr> <strong> の最後に <td></td> <td>HTML ロード後</td> <td>いいえ</td> <td>DOM 操作、イベント処理</td> </strong> </tr> <tr> <td></td> <td>スクリプトがダウンロードされるとき</td> <td>いいえ (実行中を除く)</td> <td>分析、広告、独立したスクリプト</td> </tr> <tr> <td><code></code></td> <td>HTML 解析後</td> <td>いいえ</td> <td>DOM に依存するスクリプト</td> </tr> テーブル> <ul> <li>結論: ベストプラクティス<code><script></code><code><body></code> </li> <li>ページコンテンツと対話し、完全にロードされた DOM を必要とするスクリプトには、<code><script async></code> の最後に </li> を使用します。<li> <code><body></code>分析や広告などの独立したスクリプトには </li> を使用します。<li> <code><head></code>ページの読み込みをスムーズにするために属性を使用しない場合は、スクリプトを <code>async</code> の一番下に配置します。<code>defer</code> </li>レンダリングの妨害を防ぐために絶対に必要な場合を除き、</ul> または <p> を使用せずに <code><script></code> にスクリプトを配置することは避けてください。</p> タグの使用法をマスターすることは、Web アプリケーションを最適化するために重要です。 インライン、内部、外部、非同期、または遅延スクリプトのいずれかを選択すると、パフォーマンスの向上、コードの保守性の向上、優れたユーザー エクスペリエンスが可能になります。
