jQuery使っても十分速いよというお話
先日のこと、かなり表示している要素のところに適用していたJavaScript(JS)があるのですが、それが重たいとの指摘があり、調査・調整することになりました。自分がコーディングをしたわけではないので、何が原因になっているのかなども全部調べるところからはじめたのですが、確かに要素数が多くなると、ものすごく重くて遅すぎる状態。
ライブラリとかを使わないでgetElementsByTagName使って、配列にpushとかの内容でごにょごにょしていたんですが、いろいろ遅い。高速化の処理を調べて修正しようとも思ったのですが、なにぶん時間も限られている。そして都合のいいことに、jQueryが、なんか別の処理のためにpluginを使うために読み込まれているという状況。それならjQuery使って処理しちゃおうと考えたわけです。
速くなるのかはとりあえず試してみるかってことでチャレンジ。
とりあえず配列にするまでを$('○○').toArray();で対応
どういう状況だったかって言うと、一部タブ化されていて見えない要素があって、見えている要素の該当部分に入っているddに対してを配列に入れるってのだけを行えばよかったのですが、最初に設定されていたのは、ページ全体のddに対して一度全部チェックが入って、配列に入れられて、その後該当する部分のタグだけ抜き出して処理みたいな流れになっていたんですよ。
結局どのライブラリを使ったとしても同じ流れになるのですが、jQueryだとその辺はCSSと同じような感覚で取得できるので、とりあえずやってみた。
$('#hoge dd.class:visible').toArray();とりあえず取得後はそのまま最初の機能に突っ込んでみるために、jQuery1.4.1を使っていたこともあり、toArray()で対応。
元の要素を配列にpushしていたくらいまでの処理を上記のようにしました。
jQueryすげぇって改めて思った時
最初思ったのは、これだけじゃ結局やっていることは同じなんだから速くはならんだろうなーなんて思っていたのですが、結果IE以外のブラウザは比較的高速に!!!
その後の処理内容も、あれこれjQuery対応化させたところ、Firefoxで15〜20秒くらいかかっていた処理が3秒くらいまで縮まったという。結構びっくりしていたりします。
速度を気にする場合は、jQuery使わないほうがいいのかな？なんて思う場面もあるのですが、条件によってはjQuery使っても問題ないくらい速く処理されてるなと思いました。
がんばって素のJS使って書いて、それでいい結果が得られないよりも十分かなと。そんな事を思った日でしたとさ。
