HTML マークアップ内のスクリプト タグの最適な配置 はじめに JavaScript を HTML ドキュメントに統合する場合、 の適切な配置は次のとおりです。タグは長い間議論の対象となってきました。この記事では、タグ配置のベスト プラクティスを検討し、<head> に関連する誤解に対処します。そして</p> <h3>歴史的誤解</h3> <p>以前は、</p> <p> を配置しないようにアドバイスされていました。 <head> のタグセクション。ただし、この推奨事項は時代遅れであり、スクリプトが解析中にページのレンダリングをブロックする可能性があることに基づいています。</p> <h3>逆に、<script> を配置すると、 <body> の先頭にあるタグセクションも望ましくないと考えられました。これは、ブラウザがページを完全にレンダリングする前に JavaScript を解析する必要があり、パフォーマンス上の問題が発生する可能性があるためです。</h3> <p>最新のベスト プラクティス</p> <p>今日、<script> の最適な配置が決まりました。タグは <head> の中にあります。セクション。これにより、ブラウザはドキュメントの残りの部分の解析をブロックすることなく、スクリプトのダウンロードをすぐに開始できます。</p> <h3>スクリプト解析に関連するブロック動作を回避するために、ブラウザは async 属性と defer 属性をサポートするようになりました。</h3> <p> async および defer 属性<strong></strong></p>Async:<p> スクリプトを使用するasync 属性は非同期に実行されます。つまり、スクリプトのダウンロードと実行中にブラウザはドキュメントの解析を続行できます。<strong></strong></p>Defer:<p> defer 属性を持つスクリプトは、ドキュメント内に出現する順序で実行されます。ただし、ドキュメント全体が解析された後でのみです。<strong></strong></p>モジュール:<h3> JavaScript type="module" のモジュールは非同期でロードされ、遅延スクリプトのように扱われます。</h3> <p>結論</p> <h3>async、defer、または module 属性を利用し、<script> を配置することで、 <head> のタグこのセクションでは、Web サイト開発者はページの読み込み速度を最適化し、ユーザー エクスペリエンスを向上させることができます。</h3> <ul>参考文献<li> <li>[非同期属性と遅延属性](https://www.html5rocks.com/en/tutorials) /speed/script-loading/)</li> <li>[遅延とスクリプトを使用して JavaScript を効率的にロードしますasync](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/defer-loading-javascript)</li> <li>[レンダリングをブロックする JavaScript を削除](https://www .w3.org/TR/html5/scripting-1.html#remove-render-blocking-javascript)</li> <li>[非同期, Defer、モジュール: ビジュアル チートシート](https://addyosmani.com/blog/async-defer-modules-explained/#~a-visual-explanation)</li> </ul>[<script>: type 属性] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)