以下斜め読んだ内容

pseudo translation of useful posts, book reviews, remarks,etc. twitter: feeddict

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..）の並行ダウンロードは

で実装されてる。

表の「|| 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に依存してる。この場合の最適化方法は？
感想
  • UA ProfilerのページにもYesと書くだけじゃなく「例外あり」と補足してほしい、と思った。
  • Script in Iframeがクロスドメインが駄目なのがよくわからないのだが・・・