ホームページ制作・システム構築なら
株式会社Omit

jQuery(JavaScript)で高速・重くならない・軽い処理の書き方を紹介します。

jQueryは便利ですが、書き方によっては処理に差が出てきます。
スマホで見るとその差がわかりやすいと思います。スラスラ動くか、カクカク動くか....

今回は、簡単に出来るものを紹介します。

jQueryを使うときセレクタはIDを使う

一見違いはないように見えるが、セレクタの「.」か「#」の違い。
やっていることは同じ事だが、探しに行くのにclassを指定すると時間が 約３倍程かかってしまう。
複数要素がある場合に　class　は仕方いが、単体の場合は id　で指定する方が良い。

/*------------------悪い例------------------*/
for( i = 0; i < 1000; i++ ){
     console.log( $(“.test-box” + i ) );
}

/*------------------良い例------------------*/
for( i = 0; i < 1000; i++ ){
     console.log( $(“#testBox” + i ) );
}

変数に入れて再利用

要素に値を入れたり、CSS変えたりするのに、悪い例のように「$("#testBox").◯◯」と書くと、毎回要素を取ってきて、それに適用するようになります。
その為、変数に入れて再利用をしましょう。
forの継続条件でも同じように変数の再利用が有効になります。

/*------------------悪い例------------------*/
$(“#testBox”).css(“border”, “solid 1px #000”);
$(“#testBox”).css(“background”, “red”);

/*------------------良い例------------------*/
var $testBox = $(“#testBox”);
$testBox.css(“border”, “solid 1px #000");
$testBox.css(“background”, “red");

/*----------------forの場合-----------------*/
var intCnt = $(".testBox").length;
for( var i=0; i < intCnt; i++ )
{
  ...
}

セレクタはシンプルに書く

わかりやすさで言えば悪い例の方が良いが、これだとdivの#testBoxを探してその中のdivの#testItemBoxを探しspanの#testItemTitleを探すという文章で書いても大変な作業になる。
シンプルに書く事で約４倍の速く取得ができる。

/*------------------悪い例------------------*/
var $testTitle = $(“div#testBox   div#testItemBox   span#testItemTitle”);

/*------------------良い例------------------*/
var $testTitle = $(“#testItemTitle”);

まだまだたくさんありますが、良く使うものを選定して紹介させて頂きました。
次は細かいのを紹介させて頂きたいと思います。