javascriptの非同期な読み込み。

昨日の続きというかなんというか。

Iframe Youtube Apiのチュートリアルを詳しく読んでいると、見たことのないjavascriptの記述に遭遇。

 // 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

「何じゃこれは」と調べていると、どうやらjavascriptを非同期で読み込むためのお作法らしい。

<script src = "https://www.youtube.com/iframe_api"></script>

こう書くと、同期的に読み込んでしまうので、レスポンスが悪くなるのだと思う。
ははあ、また勉強になってしまった。たぶん基本的なことなのだろうけれど。

ただそのあとも調べていたところ……

<script src = "https://www.youtube.com/iframe_api" async></script>

こう書けば、非同期で読み込んでくれるそうです！
"async"ですね。覚えておきます。

ちなみに、"defer"というのもあるそうで

<script src = "https://www.youtube.com/iframe_api" defer></script>

と書くと、ページの読み込みが終わってから初めて読み込みを始めてくれるようです。
なお、こちらはhtml5以前からある模様。

最後に参考にしたページを挙げておきますね。