script要素、asyncとdeferの効果

ChromeやSafariのエンジンであるWebKitの開発版にHTML5のscript要素での策定が進められているasyncとdefer属性の実装が追加された。Running scripts in WebKit - Surfin’ Safariにその旨が記載されているとともに、asyncやdeferを指定した場合にどういった動作が実施されるのかと、デモンストレーションの結果が紹介されている。asyncとdeferの効果を知るサンプルとして参考になる。

ブラウザが次のような外部のJavaScriptファイルを指定したscript要素に到達すると、そこでパース処理を一旦停止し、指定されているJavaScriptファイルのダウンロードを実行する。ダウンロードが完了したらパース処理を実施し、ふたたびHTMLのパースを再開する。ダウンロードしている間はHTMLのパースやほかのスクリプトの実行、レイアウトの処理などは実施できない。

<script src="sample.js"></script>

script要素のこの動作を回避するためのテクニックはすでにいくつも登場している。asyncとdeferは、いわばそうしたテクニックを使うことなく同様の処理を実現するためのものだ。asyncであれば次のように指定できる。asyncが指定されたscriptに到達すると、ダウンロードを開始するとともにHTMLのパースも継続する。ダウンロードが完了すると、windowのloadイベントが発生する前にasyncが指定されたスクリプトが実行される。実行順序は保証されない。

<script async src="sample.js"></script>
<script async src="sample.js" onload="targetEvent()"></script>

deferであれば次のようになる。asyncと同じように振る舞うが、documentのDOMContentLoadedイベントが実行される前までに実行されるという違いがあるとともに、deferで指定したスクリプトは実行順序が保証されている。どちらの属性もonloadと合わせて利用することが可能で、スクリプトに依存した初期化にも対応できる。

<script defer src="sample.js"></script>
<script defer src="sample.js" onload="targetEvent()"></script>

Running scripts in WebKitでは実際にサンプルを用意し、その結果どうなるかが紹介されている。ダウンロードに1秒時間がかかるJavaScriptファイルを指定したscript要素と、実行に1秒かかるインラインJavaScriptが記述された要素が含まれたHTMLのファイルの処理だ。

asyncやdeferの指定がない場合、ダウンロードに1秒、そのあとにJavaScriptの実行に1秒で、少なくとも2秒が必要になる。掲載されているタイムラインをみるとその通りに動作していることがわかる。次にdeferが指定された場合の動作が掲載されている。JavaScriptのダウンロード開始とともにHTMLのパースも継続されており、1秒のダウンロード中に1秒の実行が並列しておこなわれている。この場合、1秒程で処理が終わることになる。