async 属性と defer 属性を使用したスクリプト実行の最適化 HTML5 ブラウザでは、async 属性と defer 属性により、Web サイトの読み込み速度を向上させる効率的な方法が提供されます。 の実行を調整するタグ。これらの属性により、</body> を閉じる前にスクリプトを配置する従来のアプローチと比較して、スクリプトの処理が向上します。 tag.</p> <p><strong>async vs defer: 違いを理解する</strong></p> <p>どちらの属性も、ページ コンテンツと同時にスクリプトをダウンロードすることを目的としていますが、実行タイミングが異なります。</p> <ul> <li> <strong>async:</strong> 非同期を伴うスクリプトは、その直後にロードされます。ダウンロードされ、非同期で実行され、順序が狂う可能性があります。このアプローチは、他のスクリプトや DOM 要素に依存しないスクリプトに適しています。</li> <li> <strong>defer:</strong> defer を含むスクリプトも同時に読み込まれますが、それらはページの読み込みが完了した後にのみ実行されます。この属性は、HTML コードに表示されるスクリプトの実行順序を保証し、ページ要素または他のスクリプトに依存するスクリプトに適しています。</li> </ul> <p><strong>サイトの読み込み速度への影響</strong> </p> <p>ページの下部にあるスクリプトに async または defer を追加すると、残りのスクリプトと並行してスクリプトをダウンロードすることにより、読み込み速度が向上します。 コンテンツ。これらの属性を持つスクリプトをページの上部 (<head> 内) に配置すると、読み込みも高速化され、スクリプトをより早くフェッチしてより速く実行できるようになります。</p> <p><strong>互換性に関する考慮事項</strong></p> <p>非同期と遅延は HTML5 ブラウザでサポートされていますが、HTML4 ブラウザでは問題が発生する可能性があります。 HTML5 の採用がさらに普及するにつれて、これらの属性を採用することが推奨されます。</p> <p><strong><script defer src=...> の使用対 <script async src=...></strong></p> <p><head> 内のスクリプトの読み込みdefer 属性を使用すると、</body> の前に配置するのと同じ効果があり、指定された順序で確実に実行されます。</p> <p>async を使用すると、複数のスクリプトが同時にダウンロードされますが、それらの実行順序は保証されません。相互に依存するスクリプトの場合、これにより潜在的なエラーが発生する可能性があります。</p> <p><strong>結論</strong></p> <p>HTML5 ブラウザで最適なパフォーマンスを得るには、独立したスクリプトには非同期の使用を検討し、逐次実行が必要なスクリプト。これらのテクニックを採用することで、Web サイトの読み込み速度を向上させ、ユーザー エクスペリエンスを向上させることができます。</p>