Про быстродействие селекторов jQuery

Если вы нуждаетесь в дополнительной производительности, и все равно хотите использовать jQuery, то можете попробовать провести оптимизацию селекторов. Тест с использованием time и timeEnd методов консоли браузера в тексте данной статьи.

Берем html-код

<div id="peanutButter">
   <div id="jelly" class=".jellyTime"></div>
</div>

Пишем следующий javascript-код, в котором разными методами обращаемся к внутреннему элементу div. Не забываем подключить библиотеку jQuery. Производительность измеряем с помощью цикла с 10000 итераций:

$(document).ready(function(){

	var iterations = 10000, i;
	console.time('Fancy');
	for(i=0; i < iterations; i++){
		// Очень медленно
		$('#peanutButter div:first');
	}
	console.timeEnd('Fancy');
	console.time('Parent-child');
	for(i=0; i < iterations; i++){
		// Все еще медленно
		$('#peanutButter div');
	}
	console.timeEnd('Parent-child');
	console.time('Parent-child by class');
	for(i=0; i < iterations; i++){
		// хорошо
		$('#peanutButter .jellyTime');
	}
	console.timeEnd('Parent-child by class');
	console.time('By class name');

	for(i=0; i < iterations; i++){
		// еще лучше
		$('.jellyTime');
	}
	console.timeEnd('By class name');
	console.time('By id');
	for(i=0; i < iterations; i++){
		// самый лучший
		$('#jelly');
	}
	console.timeEnd('By id');
}

Результаты теста смотрим в консоли браузера. Ниже приведены результы из браузера Firefox 41.0.1.

Fancy: таймер запущен show:29
Fancy: 328мс show:34
Parent-child: таймер запущен show:35
Parent-child: 78мс show:40
Parent-child by class: таймер запущен show:41
Parent-child by class: 78мс show:46
By class name: таймер запущен show:47
By class name: 78мс show:53
By id: таймер запущен show:54
By id: 15мс

Из результатов теста видно, что самое быстрое обращение по id элемента – всего 15мс, а самое медленное – 328мс.

Этот тест на jsfiddle.