A Day in the Life

2009-12-01

iPhone Safari での XHR/iframe のロードはどちらが速いか

  • 答え：特に iframe を使う理由が無ければ XHR をつかえ(約2.5倍速)

手元のページでやってみた。環境は3G + WiFi。

  • XHR の readyState 4, status 200 になるまでと iframe の onload 発動まで
    • XHR 平均約700ms
    • iframe 平均約1800ms

また結果を XHR のほうは div.innerHTML = req.responsText 的な方法でノードツリー作成、iframe の場合は iframe.contentDocument を利用して、querySelector で必要なノードを取得、という場合

  • XHR(innerHTML) 約30ms
  • iframe 約50ms

とこちらも XHR の方が実機で速い。あと iframe は history.back にどんどん iframe でロードした副作用も発生してしまうので無難に XHR の方が良い。

ちなみに HT-03A(Android 1.6) のブラウザでは

  • XHR 約2000ms
  • iframe 2000ms-8000ms

とXHRのほうだと安定するがiframeのほうだと安定しない感じになった。むーん。

iframe を使った方が良い場合は、ロード先のデータの JS実行(document.write 等)をきちんと行った DOM ノードがとれるので、汎用的で速度が気にならないような場合は iframe にもメリットがある。

Android ブラウザの JS でテキストノードに utf8 文字を入れると文字化ける

  1. 外部から utf8 の JS (もちろんcharset指定してる)を読み込む
  2. その JS 内部で createTextNode('マルチバイト') してつっこむ
  3. バケラッタ

仕方ないのでユニコードエスケープシーケンスにして文字化けを回避した。ちなみに Firebug などで

"マルチバイト".quote();
copy("マルチバイト".quote()); // クリップボードにコピー

するとエスケープシーケンスが簡単に解る。BENRI-。いつも String#quote の名前を忘れるのでメモっておく。

localStorage 使い始めてハマりがちな罠

localStorage.bool = false;
alert(localStorage.bool); // false
if (localStorage.bool) alert(localStorage.bool); // false が表示される

localStorage.ary = ['a', 'b', 'c']; // この時の戻り値は ['a', 'b', 'c']
localStorage.ary[0]; // => a
localStorage.ary instanceof Array; // => false

localStorage は文字列しか格納できないので自動で型変換が行われる。console.log 等で表示すると一見 false が出るのであれれ？となる。なので消したいときはきちんと delete 演算子か removeItem(key) を使おう！

記事の一覧 ＞