Производительность между doc.querySelectorAll ('# id element') vs doc.querySelector ('# id'). QuerySelectorAll ('element');

Question

Я пытаюсь найти элемент с:

doc.querySelectorAll('#divContentList article'); 

Это хорошо работает, но другой разработчик сказал мне, что я должен написать:

doc.querySelector('#divContentList').querySelectorAll('article'); 

Он сказал, что это лучше, потому что идти прямо к #divContentList а затем найдите article элементов.

Я не думаю, что его решение является лучшим в скорости и оно дважды ищет элемент. Я думал, что querySelectorAll достаточно страшна, чтобы выполнять свою работу.

Главный вопрос: какая строка кода лучше всего?

Answer 1

Вы можете использовать JSPerf для такого рода испытаний ...

Я создал простой тест производительности с прецедентом here, и кажется, что они имеют одинаковую производительность, «единый» querySelector Кажется, что это немного более реалистично несколько раз, но я не думаю, что это будет проблемой в вашем приложении.

Answer 2

Ответ на этот вопрос является:

• Метод 1 быстрее
• Метод 2 быстрее
• Там нет никакой разницы

Вопрос заключается в том, что ответ может измениться со временем. Поставщики браузеров склонны оптимизировать методы, которые используются много. Если метод 1 используется много, он, скорее всего, будет быстрее или будет быстрее в будущем.

Оба метода кажутся мне равными (с данным вводом). Если есть фундаментальная причина, почему нужно быть быстрее: используйте более быстрый метод.

С вашего первого совпадения идентификатор всегда может быть только одним совпадением.

Если ваш запрос был ".parent .child" и есть много родителей, которые не имеют детей, то ".parent .child"бы, вероятно быстрее, чем (".parent").qsa(".child").

Answer 3

querySelectorAll оценивает справа налево, поэтому первый найдет все статьи на странице, а затем отфильтрует их до тех, что находятся под divContentList. Я бы сделал getElementById для id, а затем нашел статьи под ним.

Но, как говорили другие, протестируйте его. И протестируйте его в нескольких браузерах.

Answer 4

Благодаря Mauricio Soares с его JSPerf первый пример:

<div id="divContentList"> <article></article> </div>

Будет ли на самом деле первый метод:
doc.querySelectorAll('#divContentList article');
быстрее, если есть только ОДИН article в нем.

Я изменил jsPerf с 10, затем до 1000 article, разница в производительности драматична. Check it here

<div id="divContentList"> <article></article> ... <article></article> </div>

это приведет, что второй метод на мой вопрос:
doc.querySelector('#divContentList').querySelectorAll('article');
гораздо быстрее

И наконец, один с помощью getElementById к производительности увеличивается немного больше.
doc.getElementById('divContentList').querySelectorAll('article');
Это лучшее исполнение

Keith Rousseau получил право, что querySelectorAll оценивает справа налево.

Edit:

Также я узнал что-то другое о querySelector и getElementById/getElementsByTagName. querySelector возвращает Static NodeList, а getElementById возвращает Live NodeList.

Я сделал еще один test
document.getElementById('divContentList').getElementsByTagName('article');
Это один берет пирог. Разница смешна