【レポート】

script要素、asyncとdeferの効果

 

The WebKit Open Source Project

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のファイルの処理だ。

defer指定なしの場合は2秒強の処理時間 - Running scripts in WebKit - Surfin’ Safariより抜粋

defer指定ありの場合は1秒強の処理時間 - Running scripts in WebKit - Surfin’ Safariより抜粋

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



転職ノウハウ

あなたが本領発揮できる仕事を診断
あなたの仕事適性診断

シゴト性格・弱点が20の質問でサクッと分かる!

「仕事辞めたい……」その理由は?
「仕事辞めたい……」その理由は?

71%の人が仕事を辞めたいと思った経験あり。その理由と対処法は?

3年後の年収どうなる? 年収予報
3年後の年収どうなる? 年収予報

今の年収は適正? 3年後は? あなたの年収をデータに基づき予報します。

激務な職場を辞めたいが、美女が邪魔して辞められない
激務な職場を辞めたいが、美女が邪魔して辞められない

美人上司と可愛い過ぎる後輩に挟まれるエンジニアの悩み

人気記事

一覧

イチオシ記事

新着記事

Parrot、80km/hで飛行可能な固定翼ドローン「Parrot Disco」を発表
[17:44 9/27] テクノロジー
小林麻耶、意外な一面を告白「イメージとは違い...甘えるのが苦手」
[17:44 9/27] エンタメ
外国人観光客、ランチ平均単価は1,644円 - 最も高額なのはどの地域の人?
[17:32 9/27] マネー
公共料金の「ビットコイン払い」が可能に!? - まずは"電気代"から
[17:28 9/27] マネー
ふるさと納税を申し込んだ理由、1位は?
[17:27 9/27] マネー

求人情報