HTML5 scriptタグにasync / deferを使って画面表示を速くする

HTML5で追加された機能です
<script>タグの読み込みを非同期に実行させHTMLパースを継続する
（画面表示を速くする）方法があります
WHATWGの説明がわかりやすいです

デフォルト、async、deferの違い

HTMLパースのブロックに関してはGoogleのDeveloper記事でも言及されているので一読しておくと良いです

全体像

<script>（デフォルト）

scriptタグに何も指定していない状態（デフォルト状態）では
すべて直列に処理されており、HTMLパースが中断、JSダウンロードして
JS実行後にHTMLパース処理が再開されます

scriptタグが多ければ多いほど、ダウンロード→実行→ダウンロード→実行…
なので画面表示まで時間がかかるわけですね

<script defer>

deferは、パース処理を中断させずJSダウンロードを行い、パースが終われば
JSを実行します
中断されることがないのでデフォルトに比べて画面表示までが短くすみます

<script async>

asyncは、JSダウンロード時はパース処理を中断せず、ダウンロード後に
JS実行する際はパースを中断します

deferに比べると遅くみえそうですが、ダウンロードのタイミングによっては
差がでない場合もあります
ただ、パースを中断させる可能性を考えた場合deferのほうが良いと思います

まとめ

デフォルトは割り込み処理が多く、一番パフォーマンスが悪いです
次に、asyncかdeferですがネットワークが挟まる場合、どれくらい時間がかかるかは予測が全く出来ません
なので私はdeferが良いと思っています