Прокрутите вниз для сравнения 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: ~ 90ms
test2: ~ 18 мс
Chrome:
test1: ~ 65ms
test2: ~ 30 мс
Опера:
test1: ~ 50ms
test2: ~ 100 мс
Итак, в Firefox и Chrome второй метод работает в несколько раз быстрее, как я и ожидал. Однако в Opera ситуация обратная. Интересно, что здесь происходит.
Не могли бы вы провести тест на своей машине и объяснить, почему Opera работает по-другому?
Update
Я написал этот тест, чтобы исследовать, действительно ли Opera qSA является супер-быстрым. Как оказалось, это так.
(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' );
Я выполнил выше script пять раз подряд в каждом браузере. Арифметические средства:
(Все числа указаны в миллисекундах.)
Таким образом, производительность первого метода практически одинакова в тестируемых браузерах (16-36 мс). Однако, хотя qSA намного медленнее по сравнению с первым методом, в Opera это происходит быстрее!
Итак, оптимизация qSA возможна, мне интересно, чего ждут другие браузеры...