JavaScriptの遅延ロードの効果とブラウザ

JavaScriptフレームワークSproutCoreの主要開発者であるCharles Jolley氏がSproutCore BlogにおいてJavaScriptの遅延ロードテクニックの概要と簡単なベンチマーク結果を紹介している。JavaScriptの読み込み時の処理がどのようにおこなわれ、どうやって遅延ロードを実現すればいいか、またその結果やブラウザごとの効果の違いなどがまとまっており参考になる。

• SproutCore Blog - Faster Loading Through Eval()
• SproutCore Blog - Cut Your JavaScript Load Time 90% with Deferred Evaluation

Charles Jolley氏はiPhone向けGmailで採用されたJavaScriptソースコードの遅延読み込みテクニックを紹介。このテクニックがなぜ有効かを説明した。まず、ブラウザにおけるスクリプトの読み込み処理は次の3ステップにまとめられるという。

1. サーバからスクリプトをダウンロード、またはキャッシュから取得
2. スクリプトを走査
3. スクリプトを実行

Gmail for iPhoneではソースコードの一部をコメントとして用意し、1.のフェーズは実行されても2.と3.のフェーズが実行されないようにした。こうすることで画面の表示を高速化することができる。コメントとしてダウンロードしたソースコードは必要になった段階であとから取り出して評価しなおし実行する。

JavaScriptソースコードをコメントにしてダウンロードするのはかなり賢い方法ということだが、ある程度のハックが必要になり、iframeも利用することになるうえ、クロスドメインでは利用できないという。コメントの代わりに文字列としてダウンロードすることもでき、文字列でダウンロードした場合にはコメントでダウンロードした場合にかかってくる制限がなくなるという。

Charles Jolley氏は実際に50KBの関数を直接script要素内に記述して読み込みと実行にかかる時間と、コメントおよび文字列でダウンロードする時間を比較。コメントとしてダウンロードする場合がもっともロード時間が短く、次に文字列、関数を直接ダウンロードする場合にはそれと比較して実に長い時間がかかることを紹介している。読み込みに時間がかかるiPhoneではこの違いは体感として感じられるほどの違いになる。

Charles Jolley氏はフォロー記事で、今度はダウンロードしたソースコードを実行するところまで含めて、遅延ロードが全体としてどういった効果を出すのかを計測。Firefox、WebKit、iPhoneでは遅延させることで全体としては処理時間が伸びるのではないかとみられていたがそれほど大きな差がなく、遅延ロードのテクニックが有効であることを伝えている。ChromeとIE8はそれぞれ違う特性を示している。Chromeはscript要素に記載した場合の処理がすでにかなり高速で、遅延ロードを使うと逆に遅くなる。またIEではそもそものロード時間の短縮がみられず、テクニックがそれほど有効ではないという。

Charles Jolley氏はJavaScriptの遅延ロードが有効なケースとして次のパターンを紹介している。

• JavaScriptコードがすでに最適化されており、ミニファイも実施されている。そのうえで遅延ロードが可能であるケース
• 初期ページの読み込み時間を可能なかぎり最小にする必要に迫られているケース
• かなり大きなサイズのJavaScriptソースコードを使っているが、実際にあるセッションで利用するのがそのうちの一部でしかないケース

遅延ロードの機能はすでにSproutCoreの開発ブランチにマージされており、次期リリースとなるSproutCore 1.1に同梱してリリースされる見通し。