- 2010-09-07 (火)
- 技術
HTML5のscript要素でasync, deferを使ってパフォーマンスアップ - IT-Walker on hatenaこちらの記事を拝見してて、そういえばasync属性は試したことがなかったので、検証したのをメモメモ。
とは言っても、scriptタグにasync属性を付与しただけですが...
現時点でasync属性をサポートしているのは、Firefox3.6（参考記事：What is a non-blocking script?）だけのようですので、こちらで試しました。
一応async属性について解説すると、
「スクリプトは利用可能になった時点で非同期に実行されます。」
となっていて、
同じような属性のdefer属性は、
「スクリプトはページのパースが終了したときに実行されます。」
雰囲気は同じように見えますが、実行されるタイミングが違いますね。
[via]
script 要素 - スクリプティング - HTML要素 - HTML5 タグリファレンス - HTML5.JP
async属性を試してみる
4つのscriptを読み込むときに、
3つはasync属性を付与して非同期読み込みを実行します。
1つはasync属性を付与しないで同期読み込みを実行します。
以下のように比較的大きなJSファイルを初め（prototype.js）と最後（jquery.js）に読み込んで、その間にconsole.logしかないJSファイル（a.js）を読み込むようにしときます。
んで、これを実行すると！
1番目："script on body"
2番目："a.js"
3番目："prototype.js"
4番目："jquery.js"
という順番でコンソールに出力されました！
つまり、async属性がないbody内のscriptが一番初めに実行され、軽いJSファイルのa.jsがその次に実行されたという結果になります。
でも、script 要素 - スクリプティング - HTML要素 - HTML5 タグリファレンス - HTML5.JPここに書かれている「非同期に実行するスクリプトのリスト」をブラウザが内部的に保持しているとしたら、その順番通りに実行されるんじゃないのかな？
ダウンロード処理までは順番で、その後の実行までは管理しないとなると順番がバラバラになるのはなんとなく分かるんだが。。。
ここらヘンはまだ良くわからないですね。
ちなみに他のChrome、Safari、Operaなどで試してみましたが、サポートしていないためなのか、普通に上からscriptを実行していきました。
そりゃそうですねｗ
Google Analyticsのトラッキングコードでasync属性が使われている
僕は古いトラッキングコードを今だに使っているので、以下のコードは見たことがなかったんですが、
ga.setAttribute('async', 'true');
の部分で使用されています。
そもそもDOMを使ってscriptを挿入しているので、この時点で非同期で読み込まれるから、あんまりasync属性の恩恵は受けないのかもしれないですね。
async属性を記述しているのは明示的に非同期で読み込むことをブラウザに通知するためとGoogle Code Blogには書いてあります。
via: Google Analytics 非同期トラッキングコード再考 | MOL
[via]
Google Code Blog: Google Analytics Launches Asynchronous Tracking
追記：上記リンクにあるトラッキングコードは古かったようなので、以下のリンク先から抜粋させていただきました。
Google Analytics 非同期トラッキングコード再考 | MOL
■関連リンク
・動的なscriptタグの読み込みを同期的に行う | Blog.37to.net
・外部JavaScriptの動的ロード - 0xFF
オライリージャパン
売り上げランキング: 11944
- Newer: Wordpressを使っておすすめ記事をレコメンドするTwitterBotを作ってみた - NoTechnoNoLife
- Older: HTML文字列に値をバインドしてくれるjQuery Plugin - jTemplete
Trackback:0
- TrackBack URL for this entry
- http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1260
- Listed below are links to weblogs that reference
- scriptタグにHTML5からサポートされているasync属性を指定すると読み込む順番を担保しないで実行される from HouseTect, JavaScriptな情報をあなたに
