Прокрутите вниз для сравнения getById.getByClassName с qSA!
Если мы хотим выбрать все элементы класса "bar", которые находятся внутри элемента с идентификатором "foo", мы могли бы написать это:
$( '#foo .bar' )
или это:
$( '.bar', '#foo' )
Конечно, есть и другие способы для достижения этой цели, но ради этого вопроса давайте сравним только эти два метода.
Итак, какой из вышеперечисленных методов работает лучше? (Что требует меньше времени для выполнения?)
Я написал этот тест производительности:
(function() {
var i;
console.time('test1');
for( i = 0; i < 100; i++ ) {
$('#question-mini-list .tags');
}
console.timeEnd('test1');
console.time('test2');
for( i = 0; i < 100; i++ ) {
$('.tags', '#question-mini-list');
}
console.timeEnd('test2');
})();
Вы должны выполнить его из консоли на стартовой странице Переполнение стека . Мои результаты:
Firefox:
test1: ~ 90 мс
test2: ~ 18 мс
Chrome:
test1: ~ 65 мс
test2: ~ 30 мс
Opera:
test1: ~ 50 мс
test2: ~ 100 мс
Так что в Firefox и Chrome второй метод работает в несколько раз быстрее - как я и ожидал. Однако в Опере ситуация обратная. Интересно, что здесь происходит?
Не могли бы вы запустить тест на своем компьютере и объяснить, почему Opera работает по-другому?
Обновление
Я написал этот тест, чтобы выяснить, действительно ли qSA от Opera действительно супербыстрый. Оказывается, это так.
(function() {
var i, limit = 5000, test1 = 'test1', test2 = 'test2';
console.time( test1 );
for( i = 0; i < limit; i += 1 ) {
document.getElementById( 'question-mini-list' ).getElementsByClassName( 'tags' );
}
console.timeEnd( test1 );
console.time( test2 );
for( i = 0; i < limit; i += 1 ) {
document.querySelectorAll( '#question-mini-list .tags' );
}
console.timeEnd( test2 );
})();
Опять же, вы должны запустить этот код из консоли на стартовой странице переполнения стека. Я использовал букмарклет Firebug Lite для IE9 (поскольку этот браузер не поддерживает console.time).
Итак, я сравнил этот метод:
document.getelementById( 'A' ).getElementsByClassName( 'B' );
к этому методу:
document.querySelectorAll( '#A .B' );
Я выполнил вышеописанный скрипт пять раз подряд в каждом браузере. Арифметические средства:
(все числа в миллисекундах.)
Итак, производительность первого метода почти одинакова в протестированных браузерах (16-36 мс). Однако, хотя qSA намного медленнее по сравнению с первым методом, в Opera он на самом деле быстрее!
Итак, оптимизация qSA возможна, интересно, чего ждут другие браузеры ...