jQuery処理時間高速化のポイント

DOM操作の回数を減らす

appendメソッドを500回実行して作る場合

実行
10回の平均処理： msec


for(var h=0;h<500;h++){
	$('#domTa').append('
');
}

500個のdivを変数に入れてappendメソッドを1回実行して作る場合

実行
10回の平均処理： msec


var html = '';
for(var h=0;h<500;h++){
	html += '
';
}
$('#domTa').append(html);

単一要素の参照はIDを使う

属性値で参照した場合（500回）

実行
10回の平均処理： msec


for(var h=0;h<500;h++){
	$('[value="input"]');
}

クラスで参照した場合（500回）

実行
10回の平均処理： msec


for(var h=0;h<500;h++){
	$('.input');
}

タグで参照した場合（500回）

実行
10回の平均処理： msec


for(var h=0;h<500;h++){
	$('input');
}

IDで参照した場合（500回）

実行
10回の平均処理： msec


for(var h=0;h<500;h++){
	$('#input');
}

階層を掘り下げる参照はfindを使う

子孫セレクタで参照した場合（500回）

実行
10回の平均処理： msec


for(var h=0;h<500;h++){
	$('#content .news p');
}

子セレクタで参照した場合（500回）

実行
10回の平均処理： msec


for(var h=0;h<500;h++){
	$('#content > .news > p');
}

findメソッドで参照した場合（500回）

実行
10回の平均処理： msec


for(var h=0;h<500;h++){
	$('#content').find('.news').find('p');
}

要素を参照する際に範囲を指定する

FirefoxやInternet Explorerでは実感できるほどの差は出ませんが、ChromeやSafariでは明らかです。

範囲を指定していない場合

実行
10回の平均処理： msec
for(var h=0;h<500;h++){
	$('.canvas');
}

範囲を指定した場合

実行
10回の平均処理： msec
for(var h=0;h<500;h++){
	$('.canvas', '#select');
}

何度も参照するものはキャッシュする

キャッシュを使わない場合（500回）

実行
10回の平均処理： msec


for(var h=0;h<500;h++){
	$('#main').find('.news').find('p');
	$('#main').find('.column').find('p');
}

キャッシュを使った場合（500回）

実行
10回の平均処理： msec


var main = $('#main');
for(var h=0;h<500;h++){
	main.find('.news').find('p');
	main.find('.column').find('p');
}

メソッドチェーンを使う

メソッドチェーンを使わない場合（500回）

実行
10回の平均処理： msec

	



for(var h=0;h<500;h++){
	$('#methodChainTa .target').css('margin-left', i*h);
	$('#methodChainTa .target').attr('width', i*h);
}

メソッドチェーンを使った場合（500回）

実行
10回の平均処理： msec

	



for(var h=0;h<500;h++){
	$('#methodChainTa .target').css('margin-left', i*h)
								.attr('width', i*h);
}

eachよりforを使う

eachを使った場合

実行
10回の平均処理： msec
array = [1, 2, 3, 4, 5];
$.each(array, function(h){
	array[h];
});

forを使った場合

実行
10回の平均処理： msec
array = [1, 2, 3, 4, 5];
for(var h=0; h<array.length;h++){
	array[h];
}