defer属性とは
defer属性とはscriptタグに設定する属性です。このdefer属性を設定することによって、通常はインタープリタ形式で行ごと読み込みと同時に実行されてしまうスクリプトをページ読み込み後に実行するように設定できます。
この利点は、ページの表示速度が遅い場合など、先ずHTMLの読み込みを優先し、その後scriptを実行したい場合に有効です。
defer属性の使用例
HTML
<script src="test.js" defer></script>
async属性とは
async属性とはdefer属性と同じくscriptタグに設定する属性です。このasync属性を設定することによって、通常はインタープリタ形式で行ごと読み込みと同時に実行されてしまうスクリプトをスクリプトファイル読み込み後に実行するように設定できます。
defer属性との違いはdefer属性がHTMLの読み込みを優先させるのに対し、asyncはscriptファイルをインタープリタ形式で行ごとに読み込みと同時に実行するか、全て読み込んでから実行するかの設定です。
async属性の使用例
HTML
<script src="test.js" async></script>
両方設定する場合は以下の通りです。
<script src="test.js" async defer></script>