HTML5 では、<script> タグに async と defer という 2 つの新しいブール型属性を使用できます。 async はスクリプトの非同期実行を可能にし、defer はドキュメント全体がパースされた後にのみ実行を可能にします。 これらは、ページのレンダリングを終了する前にページがスクリプトをロードして実行しなければならないような、レンダリングをブロックする JavaScript を排除することを可能にします。 以下は使用例です。

<script defer src="https://www.digitalocean.com/js/jquery.min.js"></script>

Async vs Defer

async では、ファイルは非同期にダウンロードされ、ダウンロードされるとすぐに実行されます。 defer を使用すると、スクリプトは呼び出されたのと同じ順序で実行されます。 このため、deferはスクリプトが他のスクリプトに依存している場合に選択される属性となる。 たとえば、jQueryとそれに依存する他のスクリプトを使用している場合、それら(jQueryを含む)に対してdeferを使用し、依存するスクリプトの前にjQueryを呼び出すことを確認することになります。

良い戦略は、可能な場合は非同期を使用し、非同期がオプションでない場合は遅延させることです。

👉 両属性がインライン スクリプトに何の影響も与えないことに注意してください。 caniuse.com の主要なブラウザにおける script-async 機能のサポートに関するデータ。

コメントを残す

メールアドレスが公開されることはありません。