[JavaScript] スマホ案件でjQueryよりZeptoを使う理由（軽い）を実際に計測して確かめてみた

こんにちは、最近JavaScriptにどっぷりの@yoheiMuneです。
最近のスマホ案件で、jQueryよりもZepto.jsを使うという案件が身の回りで増えた気がします。
Zeptoを利用する理由として、jQueryライクに書けるけど、ファイルサイズが小さくて軽量という理由がよく挙がっています。
jQueryとZeptoでどれくらい軽さが違うのかが気になったので、計測しました。その結果を書いたのが今回のブログです。

計測結果の前にZepto.jsについて

Zepto.jsは最近？流行っているらしいJavaScriptのフレームワークで、jQueryライクに書けるけど、ファイルサイズが軽量だという特徴があります。
IEなどのサポートを切っていたり、jQueryのよく使う機能のみをサポートしていたりと、jQueryの便利なところをピックアップした作りのようです。
詳細は、以下のサイトをご覧頂ければと思います。
- http://zeptojs.com/

計測について

今回の計測は、以下を確認したいために行った計測となります。
「jQueryより軽量なZeptoが案件で好まれているが、どれくらい軽量なのか？」

これを調べるために、以下の環境・条件で計測を行いました。

• jQueryはver.1.7.1を利用。minifyしたサイズは92.3KB。
• Zeptoはver.0.6を利用。minifyしたサイズは13KB。
• Mac上にアクセスするHTML、JSファイル(jQueryとZepto）を配備し、リクエストのキャッシュ機能はオフにした。
• Mac上で、「python -m SimpleHTTPServer」で簡易サーバーを起動した。
• アクセスは、「http://10.123.xx.xx:8000/」にiPhone5のSafariからアクセスした。（ブラウザではなくスマホの実力を見たかった）
• プロファイルには、iOS6から利用できるWebkit Webインスペクタ（詳しくはこちら）を利用した。
• 利用したプロジェクトは、githubに保存しました。

計測内容は、以下のことを行いました。

• jQueryを利用した場合のページ(tasklist.html)とZeptoを利用した場合のページ(tasklist.html)にそれぞれ５回表示した。
• 5回の結果のうち、最高値／最低値を除く３つの値の平均を計測値として利用した。
• ダウンロード時間とJavaScript評価時間を計測した。

計測結果（サマリー）

今回は、JavaScriptのプロファイリングのうち、ファイルのダウンロード時間とJSの評価時間を計測しました。
今回の数値は、iPhone5を使ってローカル環境で行っているので、数値の絶対値はかなり早いと思います。注目頂きたいのは、jQueryとZeptoの相対的な時間です。

■（ダウンロードリクエスト）Zepto.jsは、jQueryの62.8%の時間でダウンロードが完了する。
■（ダウンロードリクエスト）ファイルダウンロード時間に限れば、Zepto.jsは、jQueryの39.5%の時間でダウンロードが完了する。
■（JavaScript評価時間）Zepto.jsは、jQueryの40.1%の時間でJS評価が終了する。

具体的な値は、以下の詳細でご確認頂きたいのですが、やっぱり早いですね。
Mobileではネットワーク回線が細くてダウンロードに時間がかかったり、端末のスペックが低くてJSの評価に時間がかかる。 その状況を考えると、jQueryの機能を限定したZepto.jsを使うことにメリットを感じました。

計測結果（詳細）

以下では、計測結果の詳細を示します。
数値の中で取り消し線が引いてあるものは、５回の中で最低値／最高値に一致する値です。
平均は、最高値／最低値を除く値の平均です。
平均のところにある（xx%）は、jQueryの値との比較値です。

■jQuery1.7.1.min.js（92.3KB）

回次	サーバー応答待ち(ms)	ダウンロード(ms)	合計(ms)
①	57.9	92.8	150.0
②	90.0	70.0	160.0
③	58.4	109.0	167.4
④	65.3	110.0	175.3
⑤	57.2	209.0	266.2
平均		103.9	167.6

■zepto-0.6.min.js（13KB、単位：ミリ秒）

回次	サーバー応答待ち(ms)	ダウンロード(ms)	合計(ms)
①	56.0	42.0	98.0
②	70.2	36.1	106.3
③	73.1	47.2	120.3
④	83.6	32.4	116.0
⑤	54.6	45.0	99.6
平均		41.0(39.5%)	105.3(62.8%)

■JavaScriptの評価時間（jQuery）

回次	評価時間(ms)
①	44.1
②	50.3
③	55.7
④	51.3
⑤	53.1
合計	51.6

■JavaScriptの評価時間（Zepto）

回次	評価時間(ms)
①	25.8
②	21.2
③	19.7
④	9.2
⑤	21.2
合計	20.7(40.1%)

最後に

フロント開発を行っていて、ファイルが軽いというメリットが強く打ち出されることが多々あります。 それがどのように良いことなのかを、このような視点で確認できてよかったなぁと感じます。

今回の計測はiPhone5という高性能なモバイルを使った数値ですが、 iPhone4やAndroidだと端末性能が悪いので、jQueryとZeptoでもっと差が開きそうです。

キャッシュを利用した場合にはダウンロード時間の差異はなくなりますが、JS評価時間の差異が残ります。
今回のように、JS評価に30ms程度の差が生じることが許容範囲内か否かは、プロジェクトに依るのかなぁと思いました。

「計測条件でここまずいんじゃない？」とか「ここ違うのでは』という点がありましたら、ご指摘頂けると幸いです。

最後までご覧頂きましてありがとうございました。