S.Souders「Loading Scripts Without Blocking」

High Performance Web Sites :: Loading Scripts Without Blocking

Steve Soudersのブログ「High Performance Web Sites」のエントリ。
UA Profilerで公開されてる情報への補足エントリ（、として読んだ）。
UA Profilerによると、外部jsと他のページ内要素（css,js,img,etc..）の並行ダウンロードは

• Chrome 2.0
• Fx 3.1
• IE8
• iPhone2.0
• Safari4.0

で実装されてる。

表の「|| Scripts」（Parallel Scripts）欄がYesになってるブラウザ。
しかしこのエントリによると、これら最新ブラウザで実装されてる並行ＤＬは完全じゃない。

• iframe要素
• img要素

この2要素だけは並行ＤＬできない。
ブラウザの不完全な並行ＤＬを、javascriptでより完全な並行ＤＬにできる、方法は6種類あり、
それぞれにメリット／デメリットがある

• 実装できるブラウザの範囲
• js間の依存関係の保存
• etc...

、でも比較的オススメはコレ、・・・・という主旨のエントリ

以下斜め読んだ内容

（オリジナル）

• 実装方法一覧
  • XHR Eval
    • XHR（XMLHttpRequest）でスクリプトをロード、responseTextをevalする
  • XHR Injection
    • XHRでスクリプトをロード、オンザフライでscript要素作る、textプロパティにresponseText代入、script要素をページに挿入
  • Script in Iframe
    • scriptを記述したhtmlファイルを用意、それをiframeからロード
  • Script DOM Element
    • オンザフライでscript要素作る、作ったscript要素のsrc属性にjsファイルのパス指定、script要素をページに挿入
  • Script Defer
    • script要素にdefer属性つける。
    • IE, Saf4, Chr2, FF3.1、限定のテクニック
  • document.write＋Script Tag
    • document.writeを使ってscriptタグをページに挿入
    • このテクニックを使ってもIEだけ並列ＤＬが実装できない。
• 実装方法の各々についてはCuzillionで確認できる
• 各実装方法にそれぞれメリットデメリットあり
• どれが最良の実装方法か？
  • 最適な実装方法は、案件・環境による。実装方法の選択はそれほど難しくない。3点だけ考慮し、それぞれ判断していけばチョイスできる
    • same origin policyを守るかどうか
    • 各jsファイルの依存関係は維持したいかどうか
    • ビジーアイコン（busy indicators）が出せなくなってもいいかどうか
• 理想的解決
  • decision treeとして図示した実装パターンをテンプレート化してサーバーサイドで実装
  • 開発者が手軽に案件に応じて実装パターンを選択できるようにする。
• 多くの場合オススメ
  • Script DOM Element
    • 理由１。same origin policyの制約無し
    • 理由２。実装がカンタン
• Ｑ：外部jsとインラインscriptの組み合わせ。しかもインラインscriptが外部jsに依存してる。この場合の最適化方法は？
  • Ａ：別にエントリ（"Coupling asynchronous scripts"）書いたよ。

感想

• UA ProfilerのページにもYesと書くだけじゃなく「例外あり」と補足してほしい、と思った。
• Script in Iframeがクロスドメインが駄目なのがよくわからないのだが・・・
  • この手法ではデベロッパー ガイド - AJAX Libraries API - Google Codeと組み合わせることができない、という理解でＯＫ？少し勉強する