[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とほぼ同じタイミングですが
キャッシュが効いてる場合は一番最後になってしまいますね。
利用する際は注意が必要ですね。

GoogleTagManagerではdocument.writeは動作しない

GoogleTagManagerの動きをちょっと確認したところ、
ヘルプページに書いてあるとおりではありますが、すべて非同期で動作してます。

これもヘルプページに書いてあることですが、document.writeの処理が入っているタグは動作しません。

カスタム HTML は、目に見える変更をページに加えることがなく、同期して発行される必要がない、または特定の順番で発行される必要がないタグを含めるために使用します(たとえば「document.write」機能がスニペットに組み込まれているタグや A/B テスト タグは使用できません。タグの制限についてはこちらをご覧ください)。

”特定の順番で発行される必要がないタグ”ともあります、つまりはよくみるこんなタグもアウトってことですね。

<script>
var aaaa = 12345;
var bbb_id = "xxxxx";
</script>
<script src="xxxxx.js"></script>

外部jsで先に宣言したパラメータを取得する類のやつです。

GoogleTagManagerで動くか以前に、順番が変わってもコールバックさせるなりして
動作するようにしておくべきかと思いますが・・・

[JavaScript]Googleコンバージョンタグ、リマーケティングタグを非同期で実行する方法

Googleコンバージョンタグ、リマーケティングタグを非同期で実行する方法がわかったのでメモ。
GoogleTagManagerの動きを見て勝手にやってるだけなので、実際に使うときはちゃんと確認したほうがいいです。

<script type="text/javascript" src="http://www.googleadservices.com/pagead/conversion_async.js">
</script>
<script type="text/javascript">
 window.google_trackConversion({
   google_conversion_id : 00000000000,
   google_conversion_language : "en",
   google_conversion_format : "3",
   google_conversion_label : "XXXXXXX",
   google_conversion_value : 0}
);
</script>

conversion.jsではなく、conversion_async.jsってのが注意。

複数のコンバージョンタグ、リマーケティングタグがある場合は、引数を変えてgoogle_trackConversionを複数叩けばOK。

[HTML5]JavaScriptの加速度センサーを使ってみる

JavaScriptの加速度センサーを使ってみた。(ただし、iOS Safariのみです)

サンプルで作ってみました。
枠内をタップしてみてください。
(iOS Safariのみ動作します)
→サンプル

acceleration sample – jsdo.it – share JavaScript, HTML5 and CSS

[Android]HTCでConsoleMessageが・・・・

Androidアプリの実機検証は、主にHTC EVOで行なっているのだが、
こいつだとどうも「ConsoleMessage」が取れない!

Webページのjsエラーやconsole.log()がとれたらいいなと思い、
作ってみたがなぜかメッセージが取得できない。。。

試しにエミュレータでやるとうまくいくではないか。
試行錯誤に2,3時間は費やしたのに。

ぐぐってみるとそんな内容を発見
http://www.techques.com/question/1-5538516/Javascript-console.log()-on-HTC-Android-devices-and-adb-logcat
http://stackoverflow.com/questions/4860021/android-problem-with-debugging-javascript-in-webview

なんということでしょう。

やっぱ機種依存って怖いですね。