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自体のバージョンアップよりも初期化コストの高いモジュールをカスタムビルドで除外した方が高速化が見込めると考えますが、この辺りは今後の研究課題とします。