Blog

10秒止まってしまうことも…jQueryのセレクタの使い方に気をつけよう

2016.05.10Cat:jQuery デザイナー
jQuery-Logo_On_Dark

先日、とあるサイトの管理画面をコーディングしていたとき、
特別大きな処理をしているわけでもないのに、
ページをブラウザで表示してから操作できるようになるまでに、
20秒近くかかってしまうという問題に直面しました。

1つずつ処理にかかっている時間を計測してみたところ、
以下の様なコードで時間がかかっていることが判りました。

クリックしなければ動かないはずのこのコードでなぜ???
clickのコールバック関数内のコードを消してみても、かかっている時間は変わらない。
クリックする前に遅くしているということは、要素を指定しているセレクタが問題なのでは?ということになり、
セレクタを以下のように変更してみたところ、とても速くなりました。

どうやら、セレクタの指定方法が良くなかったらしく、jQueryでの要素の検索にとても時間がかかっていたようなのです。

以下が変更後のコード

必要のないセレクタの記述は極限まで削り、
取得したjQueryオブジェクト( $(“expame”) の部分のこと )は変数に保存しておくことが、
処理を遅くしないために大事なようです。

ちなみに修正前のコードでは、一つの要素の検索に0.4秒もかかっていました。つまり、要素が50個あれば、20秒もかかることに…
jQueryのセレクタの指定方法には十分注意しないといけないと、反省しました。

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ