Home > 技術 > scriptタグにHTML5からサポートされているasync属性を指定すると読み込む順番を担保しないで実行される

scriptタグにHTML5からサポートされているasync属性を指定すると読み込む順番を担保しないで実行される

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を実行していきました。
そりゃそうですねw

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

ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール
Steve Souders スティーブ サウダーズ
オライリージャパン
売り上げランキング: 11944

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な情報をあなたに

Home > 技術 > scriptタグにHTML5からサポートされているasync属性を指定すると読み込む順番を担保しないで実行される

Tag cloud
月別アーカイブ
Powered by
Powered by
Movable Type Commercial 4.261

Page Top