defer属性【defer attribute】

概要

defer属性（defer attribute）とは、HTMLの要素(タグ)の中で設定することができる属性(attribute)の一つで、スクリプトの実行をページ読み込み、表示完了後に遅らせるもの。script要素で指定する。“defer” は「延期する」という意味の英動詞。

通常、WebブラウザはHTMLファイル中にscriptタグを発見すると表示処理を中断し、スクリプトを読み込んで実行する。実行が完了すると、続きの要素の読み込みと表示を再開する。取得や実行に時間のかかる「重い」スクリプトが含まれると、表示が完了するまで閲覧者は長時間待たされることになる。

一方、script要素にdefer属性を指定すると、スクリプトの読み込みと実行は後回しにされ、ページ末尾まで表示が完了（DOMの構築が完了）した後で先頭のスクリプトから順番に実行される。論理属性であるため <script src="…" defer></script> のように属性値の指定は不要だが、XHTMLの場合は defer="defer" のようにダミーの属性値が必要となる。

似た属性にasync属性があり、スクリプトを非同期実行する。asyncが指定されたスクリプトはページ表示処理と並行して実行が開始される。実行中に表示処理は中断されず、表示完了まで実行開始が遅延されることもない。両者は独立に並行して進行する。

(2023.1.23更新)