Tag Archives: Aync

[Javascript]Javascriptの実行順序(document.readyStateとかdeferとかasyncとか)

aycn属性とかdefer属性とか実際にどういうタイミングで実行されるのか
よくわからなくなってきたので、実際に確認してみた。

内容としては、以下のタイミングで測ってみた。

  1. document.readyState: loading
  2. document.readyState: interactive
  3. document.readyState: complete
  4. DOMContentLoaded
  5. onload
  6. 外部js
  7. 外部js(asyncで呼び出し)
  8. 外部js(deferで呼び出し)
  9. 外部js DOM追加
  10. 外部js DOM追加かつasyncで呼び出し)
  11. 外部js DOM追加かつdeferで呼び出し)

サンプルのページとしては、以下の3つで試してみました。
通常パターン
imgタグを遅延させる
scriptタグを遅延させる

結果を見ると基本的には、
loading→interactive→defer属性が実行→DOMContentLoaded→aync属性実行→complete→onload
なんですが、パターン3だけおもしろい結果で、aync属性がinteractiveより前に実行されてます。
非同期実行だから?いまいちayncの動きがわからないですね。
ちなみに外部jsを参照するscriptタグをDOM追加で入れた場合は、ayncもdeferも関係ないってことですね。

似たような記事がありましたね。

javascriptの実行順序の注意
http://0xfffffff7.hatenablog.com/entry/2013/12/09/215256

【2014.2.7 追記】
IE8以前だと「DOMContentload」が存在しないため、一般的に言われている
「documentElement.doScroll(“left”);」でできるかどうかで判断する処理をを追加してみた。

window.attachEvent("onload",function(){addevent("onload")});
var ie_contentloaded = function(){
	try{
		document.documentElement.doScroll("left");
		addevent("doScroll(\"left\")")
	}catch(a){
		window.setTimeout(ie_contentloaded, 1)
	}
};
ie_contentloaded();

実行してみると、キャッシュが効いていないときは、DOMContentloadedとほぼ同じタイミングですが
キャッシュが効いてる場合は一番最後になってしまいますね。
利用する際は注意が必要ですね。