裏紙に書く程度の内容

jQuery 最新バージョンを使う

目次はこちら > jQueryを使う際の25個Tipsを確認してみる

常に最新バージョンを使いましょう

についてです。

最新バージョンを使うことのメリット

元記事ではjQueryの最新バージョンを使うことのメリットとして、

  • 新しい便利な関数が追加されている
  • バグが修正されている

ということが説明されています。

また、それ以外にもパフォーマンスが高まっていることもあるんだとか。

パフォーマンスを比べてみる

関数の追加、バグ修正というメリットに関しては説明もいらないでしょう。
ここではもう一つのメリットであるパフォーマンスがどれだけあがっているのか調べてみます。

確認方法

各バージョンのjQueryを読み込んで、同一のhtml,jsで、console.time()を使って実行時間を計測します。

どういうコードの場合にパフォーマンスの改善がみられるかは不明。

使用するhtmlは以下。(body部)

<div class='test-0'>test</div>
<div class='test-1'>test</div>
<div class='test-2'>test</div>
(以下略)

“class”を”test-0”~”test-4999”まで、5,000個の<div>要素を準備します。

実行するjsは以下。

console.time('test');
for (var i = 0; i < 5000; i++) {
    $('.test-' + i).text('data' + i);
}
console.timeEnd('test');

比較結果

結果は以下。

※正確なベンチマークではありません。上記を何度か実行してなんとなくの平均値です。

version 結果
2.2.2 約 1,161ms
2.0.0 約 1,230ms
1.12.2 約 1,280ms
1.9.0 約 1,316ms
1.7.0 約 1,330ms

僅かな差ですが、やはり新しいほうがパフォーマンスはよさげです。

最新バージョンを使うデメリット

続いて、最新バージョンを使う場合のデメリットについて。

1系・2系の違い

1系・2系についてですが、

1系はIE8以前をサポート、2系はIE8のサポートは捨てたバージョン、という理解でいいらしいです。

IE10以下は切り捨ててもよくなった昨今、これから作るものについては2系をメインに使うことになるかと思います。

削除された関数がある

古いjQueryで使用していた関数が、新しいバージョンではなくなっていることがあります。

一例としてlive()

かつてはよく使った関数ですが、これはバージョン1.7非推奨になり、1.9で削除されたようです。

なので何も考えずにjQueryのバージョンあげてしまうと動かなくなってしまう場合があるので注意が必要です。

※これ以外の削除された関数は以下のリファレンスで確認できます。

Removed | jQuery API Documentation

結論

古いIEを切り捨てていいなら新しいバージョンを使おう。
古いjQueryからバージョンアップする場合は関数がなくなっていないか注意が必要。

参考

http://web-pc.net/jquery012

Index