grunt を 0.3 から 0.4 にアップデートしてみた
jQuery から Zepto.js に移行した時のメモ
先日、開発中のサービスのパフォーマンスがよろしくないという指摘が上がり、
原因は色々あるのだけどまぁフロントエンドでもやることはやろうということで、
ライブラリとして利用していた jQuery から Zepto.js に移行してみました。
Zepto.js は jQuery と比較してファイルサイズが小さく、初期化処理が高速なので、移行するだけでパフォーマンス改善が期待できます。
ただし、jQuery の完全サブセットというわけではないので、jQuery への依存度によって移行の難易度は変わってきます。
今作っているサービスでは、以下の対応で無事移行することができました。
同じような状況の方の参考になれば。
Deferred が無い
simply-deferred を導入して解決しました。
ただ、$.when を利用した時に全ての Deferred の戻りを resolve に返してくれないので、その部分をパッチしました。
(この件はそのうちエントリ書きます)
$.data が型変換を行わない
jQuery では自動的に型変換が行われますが、Zepto では全て文字列が返ります。
JavaScript の型変換を利用しないポリシーで実装していたので、明示的に型変換を行う対応が必要になりました。
$.ajaxError が無い
$.ajax でエラーが発生した場合に共通的なエラーダイアログを表示するために利用していました。
今回は $.ajax をラップしたモジュールを共通的に利用していたので、$.ajax().fail() に実装を移して解決しました。
$.ajaxPrefilter が無い
iOS6 で POST リクエストもキャッシュされてしまう問題に対応するため、
POST 時に URL にタイムスタンプを付与する実装を入れていました。
($.ajax の cache: false は POST 時に有効にならない)
前述の通り、$.ajax の利用箇所を1つにまとめていたので、$.ajax コール前に URL を書き換えることで解決しました。
$.event.special が無い
$.event.special を利用することで、jQuery は独自のイベントハンドラを定義したり、既存のイベントハンドラをフックすることができます。
これを利用して、Mobile Safari での click event による 300ms delay を対処するため、独自の touch イベントを定義していました。
Zepto では別途 tap というイベントが利用できるので、こちらを使うことで解決。
CSS3 アニメーションライブラリが動かない
利用していた CSS3 アニメーション用 jQuery プラグインが $.queue を利用していたため、queue 実装を持たない Zepto.js では全く動きませんでした。
これはとりあえず独自に queue の実装を行なって対処しました。
iPhone 5 の電池の消費が早い場合の対策メモ
iPhone5 の電池の消費が iPhone4 より極端に早くねーか・・・？と思い、色々設定を試してたところ、どうも Siri がオンの場合に電池の消費が早いような感触です。
常に必要とする機能じゃないし、オンにされている方は一度オフにしてお試しください。
