読者です 読者をやめる 読者になる 読者になる

以下斜め読んだ内容

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になってるブラウザ。
しかしこのエントリによると、これら最新ブラウザで実装されてる並行DLは完全じゃない。

  • iframe要素
  • img要素

この2要素だけは並行DLできない。
ブラウザの不完全な並行DLを、javascriptでより完全な並行DLにできる、方法は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だけ並列DLが実装できない。
  • 実装方法の各々についてはCuzillionで確認できる
  • 各実装方法にそれぞれメリットデメリットあり
  • どれが最良の実装方法か?
    • 最適な実装方法は、案件・環境による。実装方法の選択はそれほど難しくない。3点だけ考慮し、それぞれ判断していけばチョイスできる
      • same origin policyを守るかどうか
      • 各jsファイルの依存関係は維持したいかどうか
      • ビジーアイコン(busy indicators)が出せなくなってもいいかどうか
  • 理想的解決
    • decision treeとして図示した実装パターンをテンプレート化してサーバーサイドで実装
    • 開発者が手軽に案件に応じて実装パターンを選択できるようにする。
  • 多くの場合オススメ
    • Script DOM Element
      • 理由1。same origin policyの制約無し
      • 理由2。実装がカンタン
  • Q:外部jsとインラインscriptの組み合わせ。しかもインラインscriptが外部jsに依存してる。この場合の最適化方法は?
感想
  • UA ProfilerのページにもYesと書くだけじゃなく「例外あり」と補足してほしい、と思った。
  • Script in Iframeがクロスドメインが駄目なのがよくわからないのだが・・・