script 要素 defer 属性 (HTML)

[21] script 要素の defer 属性は、構文解析が完了してからスクリプトを実行するべきことを表します。

仕様書

[6] HTML Standard (2016-02-16 01:30:20 +09:00 版) <https://html.spec.whatwg.org/#the-script-element>
- [7] HTML Standard (2016-02-21 07:50:23 +09:00 版) <https://html.spec.whatwg.org/#attr-script-defer>

意味

[8] defer 属性は、スクリプトがどう処理されるべきかを指定するものです。 >>7

[10] script 要素の種別が古典スクリプトの場合で、 async 属性が指定されない場合には、 defer 属性が指定されると、構文解析と並列に fetch が行われ、構文解析が完了してから評価されます。 async 属性も defer 属性も指定されない場合には、 fetch と評価が直ちに行われ、その後構文解析が再開されます。 >>7

属性値

[3] defer 属性は、ブール型属性です。

文脈

[12] script 要素の種別が古典スクリプトで、 async 属性が指定されていない時、 defer 属性が効果を持ちます。

[17] defer 属性は、 async 属性が指定されている場合であっても、 async 未対応の利用者エージェントでの動作を考慮して、指定することができます >>7。しかしどの Webブラウザーも async に対応した現在となっては、その必要ももう無さそうです。

[13] script 要素の種別がモジュールスクリプトの時は、 defer 属性は効果を持ちません >>7。

[18] モジュールスクリプトの時は、常に defer を指定した古典スクリプト相当の動作となります。

[9] script 要素の種別がデータブロックの時は、 defer 属性を使ってはなりません >>6。

処理

[11] script を参照。

[25] なお、初回処理時の値が使われるので、動的に変更しても、意味を持ちません >>7。

`HTMLScriptElement` インターフェイス `defer` 属性

[29] HTMLScriptElement インターフェイスの defer IDL属性は、 defer 内容属性を反映しなければなりません >>6。これはブール値として反映するものです。

歴史

HTML4

[15] HTML4 時代には defer 属性は定義こそされていましたが、スクリプトの処理モデル自体が規定されていないため仕様書の説明もほとんど意味不明でした。そのためか世間に流布している解説の類も混乱していました。唯一 IE が実装していましたが、それが仕様書と合致しているのかもよくわからない状況でした。

[1] HTML の script 要素の defer 属性は、そのスクリプトが文書内容を生成しないことを示します。

[2] 仕様書:

HTML 4
- <IW:HTML4:"interact/scripts.html#adef-defer">

[22] HTML 4 DTD の注釈 (参考) には UA may defer execution of script と書かれています。

[4] この属性が指定されていると、そのスクリプトが文書の内容を生成しないことを意味します。 JavaScript の document.write が文書内容生成に該当します。 UA はこの属性が指定されていれば、構文解析とレンダリングを続行できます。 HTML 4 18.2.1

[14] 仕様書は当たり前だと思って書いていないのでしょうが、文書を読み込みながら構文解析しながらスクリプトを実行しつつレンダリングするという処理モデルが念頭にあるのだと思われます。レンダリングする文書の内容は普通は鯖から送られてきたものですが、 script 要素によって動的に生成されるかもしれません。ですから、 script 要素まで読取り・構文解析・レンダリングが到達したら、そのスクリプトを実行して結果を反映して続きの構文解析・レンダリングを行わなければなりません。しかし、スクリプトの内容が関数の定義や事象取扱器の登録なら、その時点で行う必要はありません。そこで defer と指定しておけば、 UA は文書全体をレンダリングしてから実行することができます。

[23]

Indicates that the user agent can defer processing of the script. See the defer attribute definition in HTML 4.0.

<IW:DOM1:"level-one-html.html#ID-93788534">

[24]

Indicates that the user agent can defer processing of the script. See the defer attribute definition in HTML 4.01.

<IW:DOM2:"HTML/html.html#ID-93788534">

[19] JavaScript質問スレ <http://pc2.2ch.net/test/read.cgi/hp/1041701828/701->

703 名前: Name_Not_Found 投稿日: 03/01/31 21:13 ID:???

defer
【誤答例】
スクリプトに文書の表示を生成する要素を含まないことを宣言します。
この要素内のスクリプトが、文書の内容となるものを一切生成しない
(例えば、"document.write" などを使用していない)ことを表わします。
【正答例】
ブロック内にインラインスクリプトがなく、関数だけを含んでいることを示す。
スクリプトが必要になるまでその解析を延期することにより、
ドキュメントのロード時間が短くなり、結果的にパフォーマンスが良くなる

704 名前: Name_Not_Found 投稿日: 03/01/31 22:08 ID:???

>>703
http://www.w3.org/TR/1999/REC-html401-19991224/interact/scripts.html#adef-defer
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/defer.asp
http://www.microsoft.com/japan/developer/library/jpisdk/dhtml/references/html/SCRIPT.htm
つまり誤答例の HTML4 Spec. はウ゛ァカ仕様で
「関数だけを含む」と書いてないMSDN本家も厨房マニュアルで
正答例のMSDN日本語版スハ゛ラシイ!ってことでよろしいか?

[20] ishinao.net/mylog - deferとWScript.Shell.Runの第3引数 <http://mylog.ishinao.net/id/1190>

[26] >>20 は 404 なので...

ishinao.net/mylog - deferとWScript.Shell.Runの第3引数 <http://web.archive.org/web/20050302231327/http://mylog.ishinao.net/id/1190>

<script type="text/javascript" defer>
var shell = new ActiveXObject("WScript.Shell");
shell.run("notepad.exe", 1, true);
alert("end");
</script>
みたいなスクリプトで、shell.runの第3引数がtrue(終了するまで待つ)になっているのが効かないのはどうしてだろう? よりローカルな設定ほど強力であるというのが一般的だと思うんだけど、defer設定は何よりも強力ってことなのかなー。

いってることがよくわからない。

HTML5

[27] Ian Hickson は当初 defer は相互運用可能に実装されていないとして HTML 5 に含めないつもりだったようです (たぶん。) が、結局 src が指定されている場合にのみ利用できる属性として HTML 5 に残りました。

[16] HTML5 が初めてスクリプトの明確な処理方法を定義し、そこに defer 属性の規定も含めたことで、ようやく IE 以外の Webブラウザーもこれを実装できるようになりました。

[28] 「週報」を含むエントリー - Buzzurl [バザール] / ソーシャルブックマーク (2008-06-08 00:26:54 +09:00 版) <http://buzzurl.jp/tag/%E9%80%B1%E5%A0%B1>

<script type="text/javascript" defer="defer">
	<!--
(function(){
	var date = new Date();
	date.setTime(date.getTime() + (24*60*60*1000));
	var expires = '; expires=' + date.toGMTString();
	document.cookie = 'is_ssl=1' + expires + '; path=/; secure';
})();

(function(){
 	function beforeChange(container, active){
		if(!active){ return; }
		var bef = $(active).getAttribute("rel");
		if(!bef){ return; }
		var def = container.options.afterChange;
		container.options.afterChange = function(t,a){
			var aft = $(a).getAttribute("rel");
			if(aft){
				$(aft).value = $F(bef);
			}
			def(t,a);
			t.options.afterChange = def;
		};
	}
	Event.observe(window,'load',function(){
		new Control.Tabs($("search_tab_list"), {"defaultTab":'form_buzzurl', "beforeChange":beforeChange});
	});
})();
function gnJoin(done, caption){
	if(done){ document.join_form.done.value = done; }
	if(caption){ document.join_form.caption.value = caption; }
	document.join_form.submit();
}
-->
</script>

[405] Firefox 3.1 for developers - MDC (2009-02-08 18:25:06 +09:00 版) <https://developer.mozilla.org/ja/Firefox_3.1_for_developers#HTML_.e3.81.ae.e5.a4.89.e6.9b.b4.e7.82.b9>