<script> タグに async / defer を付けた場合のタイミング - Qiita

HTML5 においては、<script> タグに、defer や async 属性を付与することで、これらの読込が HTML パースを妨害しないようにすることができます。これにより、サイトのメインコンテンツの読込がある程度高速化されます。 async にせよ defer にせよ、それほど詳細に動作を解説した記事が見つかりませんでしたので、本記事では、これらの動作について解説します。 イベントについて まずは、async と defer の挙動を理解するために重要な、2つのイベントについて理解しましょう。 両者とも、MDN に十分な情報があるため、本記事ではそれほど詳細には解説しません。 DOMContentLoaded HTML のパースが完了した直後に発火します。 MDN load HTML のパースが完了し、CSS や画像などのダウンロードと表示、JavaScript ファイルのダウン

[cuttoff19]

ここらへんよくわかってなかった

[takets]

これよくハマるんだよなぁ……

[naga_sawa]

DOMContentLoadedでkickしたい部分はdefer/いつでもいいので読み込み次第な部分はasync/block避けにbodyの最後でscript読んでいた定番が陳腐化してhead内でdefer付きで読むのが新定石になるか

[kurocraft7522]

「async」＝「読み込みタイミングを操作できない」＝JSの実行タイミングの設定をする必要がないものに使う/「defer」＝「読み込みタイミングを操作できる」＝JSの実行タイミングの設定をする必要があるものに使う

[gt-r-blaze]

“defer”

[otchy210]

async よく使うけど、defer 知らなかった。"複数の <script> タグが defer 付きで記述されている場合、<script> タグを書いた順に実行される" って、時にめっちゃ便利なのでは？

[polamjag]

図わかりやすくて助かる