HTML マークアップ内のスクリプト要素の最適な配置 JavaScript を HTML ドキュメントに統合する場合、 の正しい配置は次のとおりです。タグとそれに関連するスクリプトは議論の対象となっています。これらを <head> に置くことは広く知られていますが、 </p> セクションの先頭に配置することはお勧めできません。 <p><strong>従来のアプローチの問題</strong></p> <p>古い推奨事項では、<script> を配置することが推奨されています。 <body> の下部にあるタグこれにより、パーサーが最後までブロックされなくなると仮定します。ただし、このアプローチでは別の問題が発生します。ブラウザは、ドキュメント全体が解析されるまでスクリプトのダウンロードを開始できません。大量のスクリプトとスタイルシートを備えた大規模な Web サイトでは、この遅延がパフォーマンスに大きな影響を与えます。</p> <p><strong>最新のソリューション: async 属性と defer 属性</strong></p> <p>現在、ブラウザーは async 属性と defer 属性を提供しています。スクリプトについて。これらの属性は、スクリプトのダウンロード中に解析を続行するようにブラウザに指示します。</p> <ul> <li> <strong>async:</strong> async 属性を持つスクリプトは、ブラウザをブロックすることなく、ダウンロードされるとすぐに実行されます。このシナリオでは、スクリプトが順不同で実行される可能性があることに注意してください。</li> <li> <strong>defer:</strong> defer 属性を持つスクリプトは、出現する順序で実行されますが、ドキュメント全体が読み込まれた後にのみ実行されます。これにより、ブラウザをブロックすることなくスクリプトが正しい順序で実行されます。</li> </ul> <p><strong>モジュール</strong></p> <p>type="module" を含むスクリプトは JavaScript モジュールとして扱われ、遅延のようにロードされる</p> <p><strong>結論</strong></p> <p>最適なスクリプト配置への最新のアプローチは、スクリプトを <head> に含めることです。セクションを開き、async または defer 属性を使用します。これにより、これらの属性をサポートしていない古いブラウザとの下位互換性を維持しながら、ブラウザを妨げることなくスクリプトを迅速にダウンロードできます。このアプローチを実装すると、Web サイトはすべてのブラウザーで機能を維持しながら、読み込み時間の短縮という恩恵を受けることができます。</p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
