Производительность селектора

Question

Я сделал тест с производительностью селектора jQuery.

Два селектора, которые я тестировал:

selection_width = total_width - ($('#commands .minimap').outerWidth() + $('#commands .actions').outerWidth());

И

var commands = $('#commands');
selection_width = total_width - ($('.minimap', commands).outerWidth() + $('.actions', commands).outerWidth());

Второй способ быстрее первого. Это правильно или я где-то испортил тест?

Answer 1

В первом тесте jQuery использует document.querySelectorAll() (относительно быстро) дважды.Во втором случае jQuery использует document.getElementById() (очень быстро) один раз и document.getElementsByClassName() (быстро, так как вы объявили контекст) дважды.

Answer 2

Первый оператор должен анализировать полное дерево DOM и дважды искать элемент #commands, тогда как второму требуется только одна проверка всего дерева DOM.Поиск элементов .minimap и .actions выполняется быстрее, потому что для этого jQuery должен выполнять итерации только дочерних элементов #commands, а не всего документа.

Answer 3

Во втором вы сохраняете элемент команд, чтобы он не был снова найден. Таким образом вы получите лучшую производительность.