「jQueryいつ使うの！？」
「今でしょ・・・？」
こんにちはほそ道です。
というわけで今回からjQueryに取り組みます。
ですが、いきなり飛びつかない！
まずはライブラリを疑うところからはじめていきたいと思います。
昨今、とりあえずサイトにjQuery入れとけ的なアプローチだったり
ネイティブJSで書ける処理をわざわざjQueryで書いているような開発者を目にする事があります。
あえて始めに言わせていただきたい！
JSライブラリを使う事のメリット/デメリットを強く意識しましょう！
ライブラリ使う前にネイティブJS書けるようになりましょう！
jQueryとは？
いつものごとく公式ページから拝借・意訳します。
- 高速・軽量・リッチなJavaScriptライブラリ。
- 様々なブラウザ環境で簡単なAPIからイベントハンドリングやアニメーションやAjaxがうまいこと実現できる。
- 多彩かつ拡張的で100万人以上ののJavaScript記述の世界をを変えた。
ほほぅ。高速という謳い文句は非常に気になりますが、他のライブラリとの比較でしょうね。
学習や調査の際には下記のオフィシャルリンクが使えるかと思います。
バージョン１系と２系の違い
現在の最新バージョンは２系が2.1.1、１系が1.11.1となります。
ブラウザサポートページにサポート環境情報が載っております。
- ２系はレガシーブラウザIE6〜8をサポートしない。IE6〜8にサポートするなら１系を使用する。
- Node.js、ブラウザエクステンション、その他ブラウザ以外の環境では２系での仕様をサポートしている。
なるほど、まぁBtoCサイトなどは１系を使う事になるのでしょうね。
ネイティブコードとの比較した際のメリット/デメリット
下記の様なメリット/デメリットを意識する事はとっても大事です。
-
メリット
- 記述量が減らせる(事が多い)
- クロスブラウザ対応を意識せずに書ける
- 拡張プラグインを使う事で少ない記述でリッチな処理が実現出来る
-
デメリット
- 高速を謳っているが、ネイティブJSとの比較では相当遅い
- 裏側でどんな処理が行われているかを概ね理解していないと副作用が怖い
- ネイティブJSが解らないのにjQueryでググったコードのコピペを繰り返すエンジニアの増殖
パフォーマンス検証
jQueryを使う事でどれくらい遅くなってしまうのかいろいろ検証してみました。
フェアになるよう３回ほど実行して平均的な値を記述してます。
jQueryロードのパフォーマンス
まずはロード時間の計測から。
ローカルファイルのjQueryを呼び出します。
| 1.11.1 | 2.1.1 | 1.11.1(min) | 2.1.1(min) | |
|---|---|---|---|---|
| FireFox | 30ms | 25ms | 20ms | 23ms |
| Chrome | 55ms | 50ms | 33ms | 40ms |
勿論ネイティブJS使う場合はこのロード時間は0です。
読み込みのみで、実行は何もしなかった状態ですが仮に20回読み出すと１秒かかる訳で、
結構な時間がかかっている事が解ります。
やはりミニファイされた状態の方がパフォーマンスは良いですね。
セレクタ処理のパフォーマンス
今度はjQueryとネイティブコードの処理を比較します。
DOM要素を相当回取り出してみます。ブラウザはChromeを使用します。
ネイティブ側はdocument.getElementById('hosomichi')を実行し、
jQuery側は$('#hosomichi')を実行します。
| 1万回 | 10万回 | 100万回 | 1000万回 | |
|---|---|---|---|---|
| ネイティブ | 3ms | 13ms | 70ms | 580ms |
| jQuery | 30ms | 270ms | 2800ms | 27000ms |
圧倒的な差がつくことがわかりましたね！
「いやいや、こんな反復しないよ！」というご意見もあるかと思いますが
ほそ道は色々な処理の塵はきっちり積もると思ってます。
ちなみに以前、ほそ道の携わったプロジェクトではサイト表示の遅さにメンバーが頭を抱えており
ネイティブコードで書き直すよう伝えただけで後でめちゃ感謝された事がありました。。
まとめ
というわけで、変にjQueryを用いる事で
jQueryを採用するときは下記の要素あたりを天秤にかけて最低限の判断は行う事が必要となるでしょう。
-
サイトパフォーマンス
- 多量の反復処理が走る可能性はないか？
- ただでさえ画像等で重いページだったりしないか？
-
開発者スキル
- 必要な部分のみにjQueryコードを採用できる？
- デザイナーが設定したjQueryをチューニング出来る？
-
プラグインの選別
- パフォーマンスは悪くない？
- カスタマイズできそう？(やりたい事に対して「惜しい」プラグインは多いです)
今回は以上です。
次回はソースコードと格闘をする準備編として、
Grunt管理されたjQueryを扱うというTIPS的なものを紹介します。