deferとasync

JavaScriptのscriptタグに指定できるdeferとasync属性についての説明します。

defer/asyncとは

JavaScriptの外部ファイルはScriptタグを使って読み込めますが、属性としてasyncあるいはdeferを指定できます。

<script src="javascript.js"></script>
<script src="javascript.js" defer></script>
<script src="javascript.js" async></script>

asyncやdeferを付けない場合、 HTMLのパース中にScriptタグが見つかるとファイルダウンロードとJavaScriptの実行が即時行われます。つまりJavaScriptのダウンロードと評価を行う分だけ、HTMLの解析がブロックされることになります。

sequenceDiagram participant H as 開始 participant S as scriptタグパース participant X1 as - participant X2 as - participant P as HTML文書解析完了 participant D as DOMContentLoaded participant L as window.load H ->> S: HTMLパース S ->> X1: JavaScriptダウンロード X1 ->> X2: JavaScriptの評価実行 X2 ->> P: HTMLパース S --> X2: HTMLパースのブロック D --> L: CSSや画像の読み込み

一方、asyncやdeferの属性を付けると、 JavaScriptファイルのダウンロード中はHTMLのパースはブロックされず、ファイルのダウンロード完了後、あるいは、DOMContentLoadedのタイミングでJavaScriptの実行が行われるようになります。

deferとは

deferの属性を指定すると、HTMLのパースとJavaScriptファイルのダウンロードが平行して実行されます。

ダウンロードしたJavaScriptの実行は、HTML文書の解析完了後、DOMContentLoaded前に行われます。

sequenceDiagram participant H as 開始 participant S as scriptタグパース participant X1 as - participant X2 as - participant P as HTML文書解析完了 participant D as DOMContentLoaded participant L as window.load H ->> P: HTMLパース S ->> X1: JavaScriptダウンロード P ->> D: JavaScriptの評価実行 D --> L: CSSや画像の読み込み

JavaScriptの実行は、HTML文書の解析が終わっておりDOMContentLoadedの前の段階となるので、 DOMを操作したり、DOMContentLoadedやloadのイベント設定を行うのに向いているタイミングです。

deferを指定したスクリプトは宣言の順序で実行されるので、ライブラリやそれを使うスクリプトはdeferの属性を付けることで問題なく実行できます。

asyncとは

asyncの属性を指定すると、HTMLのパースとJavaScriptファイルのダウンロードが平行して実行されます。

ダウンロード完了後は、HTMLパーサがブロックされ、JavaScriptの評価が実行されます。

sequenceDiagram participant H as 開始 participant S as scriptタグパース participant X1 as - participant X2 as - participant P as HTML文書解析完了 participant D as DOMContentLoaded participant L as window.load H ->> X1: HTMLパース S ->> X1: JavaScriptダウンロード X1 ->> X2: JavaScriptの評価実行 X2 ->> P: HTMLパース X1 --> X2: HTMLパースのブロック D --> L: CSSや画像の読み込み

asyncはダウンロード後にJavaScriptが実行されますが、実際にダウンロード完了後のどのタイミングで実行されるのかは確定していません。

window.loadより前にJavaScriptが実行されますが、 DOMContentLoadedより後にJavaScriptの実行がされる場合もあるため、 DOM操作や他のスクリプトに依存した処理を行うには適していません。

独立して処理が行われるアクセス解析等のスクリプトで使えます。

作成日 : 2020年06月28日