JavaScript

jQuery2.0 IE8以下サポート廃止による軽量化の程は?

jQuery2.0(2013年4月現在β版)では、レガシーブラウザ(IE8以下)のサポートが廃止されます。
今後不要になるであろうレガシーブラウザ向けのコード(バッドノウハウ)をごっそり削除する事で軽量/高速化が期待されますが果たしてどれ程軽くなるのでしょうか?
モバイルでのパフォーマンスを考慮すると軽量・高速はライブラリ選定のポイントとして重要です。

jQuery1.9と2.0のファイルサイズ比較

まず、jQueryの全APIで比較します。
gitで取得出来る1.9と2.0の最新版で比較していますが、2.0は2.0.0b2が公式サイトにて取得可能です。
※2.0.0-preと2.0.0b2のファイルサイズは誤差程度のため、ここでは2.0.0-preで比較を進めます。

バージョン minify gzip
jQuery1.9.2-pre 93kb 33kb
jQuery2.0.0-pre 83kb 29kb

全APIで比較すると現状ではjQuery2.0βで劇的な軽量化はなされていない模様。
ただ、jQuery2.0はまだ開発途中で改善の余地があるようですし今後のバージョンアップに期待といった所でしょうか。

jQuery2.0のカスタムビルド

jQuery1.8以降で対応したカスタムビルド後のファイルサイズはどのような変化があるでしょうか?
参考までに比較してみました。
※ここではjQuery2.0単独での比較とします(1.9との比較は行いません)。

カスタムビルドで除外可能なモジュールを列挙すると以下の通り。
それぞれのモジュールによってサポートされるメソッドは本家ドキュメントをご覧ください。

  • ajax
  • ajax/xhr
  • ajax/script
  • ajax/jsonp
  • css
  • deprecated
  • dimensions
  • effects
  • event-alias
  • offset
  • wrap
  • sizzle

上記モジュールの中でファイルサイズが大きいものは、ajax、css、effects、sizzleになります。
どのモジュールも有用なメソッドを提供しているため必要なケースが多いですが、少しでもjQueryを高速化させたい場合はカスタムビルドを前提に上記モジュールに依存しない形で開発するのも一考かと思います。
※その他のモジュールは1~5kb(minify前)と軽量化への影響が少ないため今回は残した状態でビルドします。

ビルド minify gzip 備考
jQuery2.0.0-pre
css, effects除外
67.5kb 15.5kb grunt custom:-css,-effectsにてビルド。
以下4モジュールが除外。
css, effects, offset, dimensions
(offsetとdimensionsはcssに依存しているため除外された模様)
jQuery2.0.0-pre
css, effects, sizzle除外
51kb 11.8kb grunt custom:-css,-effects,-sizzleにてビルド。
以下5モジュールが除外。
css, effects, offset, dimensions, sizzle
jQuery2.0.0-pre
css, effects, ajax除外
58.4kb 13.2kb grunt custom:-css,-effects,-ajaxにてビルド。
以下8モジュールが除外。
css, effects, offset, dimensions, ajax, ajax/script, ajax/jsonp, ajax/xhr
jQuery2.0.0-pre
css, effects, sizzle, ajax除外
41.9kb 9.5kb grunt custom:-css,-effects,-sizzle,-ajaxにてビルド。
以下9モジュールが除外。
css, effects, offset, dimensions, sizzle, ajax, ajax/script, ajax/jsonp, ajax/xhr

参考:jQuery互換軽量ライブラリのファイルサイズ

APIが本家ほど充実していないので単純な比較は出来ませんが、jQuery互換の軽量ライブラリを比較のため例にあげます。

ライブラリ minify gzip
zepto 1.0 27.2kb 9.7kb
jqMobi 1.2 22.2kb 7.3kb

jQuery2.0移行の過渡期のスニペット

jQuery1.9と2.0のAPIは完全互換が保証されているためレガシーブラウザのサポートが必要な場合は1.9を、不要な場合は2.0といった使い分けが可能です。
当面はIE8を無視出来ないサイトが多いことから下記スニペットのようにブラウザで異なるバージョンを読み込む方法が提案されています。
※コードはCDNからロードするなど適宜書き換えてください。

<!-[if lt IE 9]>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<![endif]->
<!-[if gte IE 9]><!->
<script src="http://code.jquery.com/jquery-2.0.0b2.min.js"></script>
<!-[endif]->

まとめ

ファイルサイズに関して言えばjQuery1.9と2.0(β版)の変化は正直少ないと言えます。
現状ではカスタムビルドにて機能を限定した方が軽量化が見込めるでしょう。
jQuery2.0正式リリースまでにカスタムビルドの仕組みが改善されるようなので今後に期待です。

将来のバージョンアップでカスタムビルドがより細かく設定可能になれば、jQuery互換の軽量ライブラリに近いファイルサイズが実現される可能性もありますし、
その上でjQueryの安定感を考えればより魅力的な選択肢になると思います。

今回の比較対象はファイルサイズであり、初期化コストとファイルサイズは比例しないため一概に言えませんがレガシーブラウザ向けの不要なコードが省かれたことで少なからず初期化コストが下がっているでしょう。
初期化コストについてはjQuery自体のバージョンアップよりも初期化コストの高いモジュールをカスタムビルドで除外した方が高速化が見込めると考えますが、この辺りは今後の研究課題とします。

HTML5を導入した制作の依頼・ご質問など、お気軽にお問合せください

※(株)インフォマークのお問合せフォームへ移動します。