10秒止まってしまうことも…jQueryのセレクタの使い方に気をつけよう
先日、とあるサイトの管理画面をコーディングしていたとき、
特別大きな処理をしているわけでもないのに、
ページをブラウザで表示してから操作できるようになるまでに、
20秒近くかかってしまうという問題に直面しました。
１つずつ処理にかかっている時間を計測してみたところ、
以下の様なコードで時間がかかっていることが判りました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $(function() { … if($(":checkbox[name='ids[]']").size() > 0) { $("td :checkbox[name='ids[]'], th:first-child :checkbox").on("click", function(e) { e.stopPropagation(); }); $("td:has(:checkbox[name='ids[]']), th:first-child:has(:checkbox)").click(function() { $(this).children(":checkbox").click(); return false; }); } }); |
クリックしなければ動かないはずのこのコードでなぜ？？？
clickのコールバック関数内のコードを消してみても、かかっている時間は変わらない。
クリックする前に遅くしているということは、要素を指定しているセレクタが問題なのでは？ということになり、
セレクタを以下のように変更してみたところ、とても速くなりました。
どうやら、セレクタの指定方法が良くなかったらしく、jQueryでの要素の検索にとても時間がかかっていたようなのです。
以下が変更後のコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | $(function() { … var $tableCheck = $("td.checkbox"), //← セレクタは最小限の記述で。取得したjQueryオブジェクトは変数に保存して利用 $tableCheckbox = $tableCheck.find("input"); //← 取得した要素の子要素などを取得するときは、取得済みのjQueryオブジェクトから絞り込む if($tableCheckbox.size() > 0) { $tableCheckbox.click(function(e) { e.stopPropagation(); }); $tableCheck.click(function() { $(this).children("input").click(); return false; }); } }); |
必要のないセレクタの記述は極限まで削り、
取得したjQueryオブジェクト( $(“expame”) の部分のこと )は変数に保存しておくことが、
処理を遅くしないために大事なようです。
ちなみに修正前のコードでは、一つの要素の検索に0.4秒もかかっていました。つまり、要素が50個あれば、20秒もかかることに…
jQueryのセレクタの指定方法には十分注意しないといけないと、反省しました。
Author Profile
SHARE
