増子良太のブログです

増子良太が書いているブログです。テーマをしぼらず、思いついたものをただひたすら書いていきます。

jQuery再入門

      2013/06/28

こんにちは!rmascoです。

今月のWEB + DB PRESSにプログラマのためのjQuery再入門という記事があったので、jQuery再入門してみました。

ほとんどは理解しているないようでしたが、パフォーマンスの部分でそういえば試したことなかったっけと思い返し、試して見ることにしました

DOM選択による違い

jQueryではJavaScriptのネイティブメソッドを使える場合にはネイティブを、そうでない場合には独自開発したメソッドを使用するそうです。なんとなくは理解していましたが、言われてみれば確かになといったところでした。

また、やはり1位であるidが一番軽く、タグ指定などをすれば重くなるようです。

では記述方法によってどのくらいの差が出るのか実験してみます。

ここではテーブルに50000行追加するという重たい処理で実験して見ることにします
↑そもそもこんな仕様にするのが悪いとか言わないように!

HTMLはこちら

    

    

 

まず通常であれば、下記のようにIDがあればIDで検索させます。
ループの中でjQueryオブジェクトを使用すると、1回ずつDomを探しにいってしまいますので、変数として最初に外へ出して、キャッシュしておきます。

この書き方であれば、6秒くらいで処理が終わり、テーブルが表示されます。

一方ダメなほうの書き方をしてみます。
tableタグのみで絞り込みます。しかもループ中でjQueryオブジェクトを使用しているので1回ずつtableタグを全検索します。通常こんな書き方は絶対にしないと思いますが、実験のためあえて派手に書いてみました。。。

その差は歴然。ダメな方で記述すると、11分くらい表示されません。今回実験のため、あえておかしな書き方をしましたが、他に重い処理をしながらだと、案外こういった差が大きくサイトの表示速度に関わってきます。

jQueryでDom操作などする場合はなるべくIDをHTML側のDOMにつける。

もしダメならなるべく絞込みがしやすいような書き方をする。

jQueryオブジェクトは2回以上使うのであれば、変数として持っておく。

 

このあたりを意識するだけでも違うのではないでしょうか。

 

 - その他