async属性を使ってJavaScriptをバックグラウンドで読み込む
今回はHTML5からサポートされた簡単に非同期でjsを読み込むことができるようになる
async属性を利用することで簡単にスクリプトを非同期で読み込むことが出来ます。
非同期でjsを読み込むとスクリプトをバックグラウンドでダウンロードできるので、ページのレンダリングを速くすることが出来ます。
参考:“async scripts”は不要か？ | POSTD
１，async属性とは
２，簡単にかけるasync属性
３，読み込みの違い
４，async属性のポイント
５，注意点
６，推奨される環境
１，async属性とは
async属性が付与されていると、利用開始とともに、スクリプトは非同期で実行されます。一方でasync属性でなければ…ユーザエージェントがページを解析する前に、スクリプトが読み込まれ、直ちに実行されます。
このような形でCSSと一緒に読み込むことができるようになります。
＜Google Chrome ディベロッパーツールで確認＞
参考：script 要素 – スクリプティング – HTML要素 – HTML5 タグリファレンス – HTML5.JP
２，簡単にかけるasync属性
async属性はHTMLに書くだけで簡単に付与することができます。
通常
<script src="http://hogehost.com/hoge-hoge.js"> </script>
script-injectedを利用する場合
<script>
var script = document.createElement('script');
script.src = "http://hogehost.com/hoge-hoge.js";
document.getElementsByTagName('head')[0].appendChild(script);
</script>
async属性
<script src="http://hogehost.com/hoge-hoge.js" async> </script>
上記のようにasync属性はscript-injectedで記述するのと比べれば言うまでもなく簡単で楽ですし、普通に記述するのと比べても最後にちょこっとasyncを書くだけなのです。
３，読み込みの違い
読み込みの違いをディベロッパーツールで見てみましょう。
通常の読み込み
<script src="...">
上の画像を見るとCSSOMで実行がブロックされているのがわかります。CSSが読み込み終わってから初めてjsが読み込まれていきます。
async属性利用時
<script src="..." async>
上の画像はasync属性で読み込んだものです。CSSOMで事項がブロックされずにCSSとほぼ同時に読み込まれ始めているのがわかります。
４，async属性のポイント
async属性のポイントを整理してみます。
・DOM構築をブロックしない。
・CSSOMで実行がブロックされない。
・プリロードスキャナが検出可能
・非順序型実行※注意が必要
最新のブラウザは”プリロードスキャナ”を持っています。ドキュメントパーサーがブロックされると起動し、ドキュメントの中身を検証して、優先度の高いレンダリングパスのブロックが解かれたら、直ちに実行すべきリソースを見つけることができます。
もちろんIE 8/9, Android 2.2/2.3でさえも動きます。
参考：DOMとは – JavaScript超初心者によるJavaScript入門講座
参考：IE10 以下を切る場合の JavaScript チェックリスト – Qiita
５，注意点
ここまでasync属性を欠点の無い素晴らしいものの様に紹介してきましたが、採用するにあたって注意すべき点があります。
それは先ほどのasync属性のポイントにも書きましたが、非同期で読み込む≒非順序型実行なのです。
つまり実行される順番が担保されない、「何番目に読み込まれるかわかりませんよ。」ということです。
したがって、複数のファイルに依存関係が存在するようなスクリプトはasync属性で非同期的に読み込むべきではありません。
複数のファイルが意図した順番で読み込まれないので意図した動作も期待できません。
６，推奨される環境とは
・スクリプトがasset pipeline などを通して完全に 1 ファイルに結合されている。
・google analiticsなどのjsのように、完全に他と独立している。
最後に、一般に知られるTwitterやFacebook等のSNSボタンのスクリプトも最近はデフォルトで非同期をサポートするようになっていたり、非同期バージョンがリリースされています。非同期バージョンに入れ替えるだけでSNSボタンは非同期読み込みにできます。この機会にSNSボタンだけではなく自分で書いたスクリプトも非同期にしてみてはいかがでしょうか。
