[JavaScript] [高速化] JSファイルの非同期読み込み。遅延ロードっていうのか？

オライリーの「続・ハイパフォーマンスWebサイト」を読んでる。
すぐ使えそうなやつもあるのでメモメモ。

JavaScriptの外部ファイルの読み込み方法として一般的なhead内にscriptタグを書く方法、これだとJavaScriptを読み込んで実行している間は他のファイルの表示をブロックしてしまう。
JavaScriptはページ内のいろんな要素やファイルと関係したりするので、実行中に他のいろんな要素に動かれると困るらしい。
最近は1つのページで何個もJavaScriptファイルを読み込んでいたりするので、これはなかなか大変

「ハイパフォーマンスWebサイト」では、JavaScriptファイルは閉じbodyタグの直前に書けって言われる。
こうすれば、とりあえずJavaScriptファイルを読み込み出すまでに、htmlの表示はほとんど終わらせておくことができる。

それでもJavaScript実行中のダウンロード、表示のブロックは防げない。

■対処法
最初は最低限必要な処理のみ記述されたJavaScriptファイルを読み込む。
その中で、他に必要なファイルを読み込む処理を書く

//scriptタグをJavaScript内で追加する
var script = document.createElement('script');
script.src = '次に読み込みたいファイル名';
document.getElementsByTagName("head")[0].appendChild(script);

このやり方だと、他の読み込み・表示をブロックせずに進めることができる
調べてみると、昔から使われている技だったのね。

参考：
↓2006年の記事
動的に JavaScriptを読み込む