jQueryのパフォーマンス

以下のページでjQueryやDOMについて学んでいます。 www.mojage.club

本記事は、jQueryのパフォーマンスについて纏めています。

Sponsored Link

パフォーマンス

jQueryファンクションにコンテキストを渡す

jQueryのパフォーマンスを上げたい場合は、2つ目の引数で単一のDOM要素を指定すると良いです。

//こちらのほうが早い
alert($('a', document.getElementById('context')).context.id); //  context

//スピードは早くならない
alert($('a', '#context').context.nodeName); //  document

キャッシュを再利用する

// 毎回要素を検索すると遅い
for (i = 0; i < $('ul li').length; i++) {
  $('ul').eq(i).text(); // Runs $('ul') every iteration
}

// 要素を変数に格納しておくと早い
var list = $('ul');
var listLength = list.find('li').length;
for (i = 0; i < listLength; i++) {
  list.eq(i).text() // Query pulled from memory
}

DOMの変更を最小限にする

// 毎回DOM要素を追加してしまう
var list = $('ul');

for (i = 0; i < 100; i++) {
  list.append('<li>List item ' + i + '</li>'); 
}

// 一つの変数にまとめると早い
var listItems = ''; // Empty string

for (i = 0; i < 100; i++) {
  listItems += '<li>List item ' + i + '</li>'; 
}

$('ul').html(myListItems); 

オブジェクトに対するメソッドの最適化

//一つずつ指定するよりも
$('a').css('display', 'block');
$('a').css('color', 'red');
$('a').attr('title', 'Title Txt');
$('a').attr('href', 'http://www.jquery.com');

//纏めると早い
$('a')
  .css({'display':'block', 'color':'red'})
  .attr({'title':'Title Txt', 'href':'http://www.jquery.com'});

同じく

//一つずつ処理すると遅い
$('#div1').hide();
$('#div2').hide();
$('#div3').hide();

//纏めると早い
$('#div1, #div2, #div3').hide();

ラッパーの不必要な繰り返しを避ける

//一つずつ記述する
$('div .open').hide();
$('div .close').show();
$('div').fadeIn();

//チェーンをしようして、ラッパーを活かす
$('div')
  .find('.open')
    .hide()
  .end()
  .find('.close')
    .show()
  .end()
  .fadeIn();

//もしくは
var $div = $(div);
$div.find('.open').hide();
$div.find('.close').show();
$div.fadeIn();

foreach()

1000回以下の繰り返し処理を行う際に、JavaScriptネイティブのforとjQueryのeach()ではスピードは大して変わりません。それ以上の繰り返し数が必要な場合はforを使う様にしましょう。

見た目の変更

CSSプロパティを扱う際は、.css()でプロパティを操作するよりも、対象のDOMのクラスやIDを更新する方が効率的です。

<style>
  .newStyles {
    background-color: red;
    display:block;
    height:100px;
    width:100px;
  }
</style>

~~~

// CSSプロパティを弄るより
$('div').css({
  'display': 'block',
  'width': '100px',
  'height': '100px',
  'background-color': '#f00'
});

// クラスを適用しよう
$('div').addClass('newStyles');

Reference from : jQuery Enlightenment