Производительность с использованием JS querySelector

При использовании JavaScript в веб-браузере существует ли разница в производительности между следующими:

Существующий getElementById

document.getElementById("elem");

Селектор запросов с использованием #id

document.querySelector("#elem");

Селектор запросов с использованием [id = elem]

document.querySelector("[id=elem]");

Я предполагаю, что первый из них будет самым быстрым (только для элементов поиска с идентификатором). Также последний выглядит плохой практикой. Мне нравится второй, поскольку использование querySelector для всего упрощает чтение кода.

Любые предложения?

ОТВЕТЫ

Ответ 1

Во-первых,

document.querySelector("#elem");

Имеет преимущество в том, что, в отличие от document.getElementId, он может возвращать классы. Однако полезность этого значительно уменьшается из-за того, что он возвращает только первый объект с этим именем класса, поэтому вы можете просто использовать идентификатор, если вы специально не ищете первый объект с этим именем класса. если вы используете,

document.querySelectorAll

Однако я верю (может быть, ошибаюсь), он возвращает все элементы с этим именем класса как массив, где регулярный запросSelector эквивалентен запросуSelectorAll [0]. Еще одно преимущество заключается в том, что вы можете запускать css3-запросы через него, что может быть весьма полезным.

Во-вторых,

document.getElementById("elem");

Имеет очень хорошее преимущество над queryselector в том смысле, что он почти в 5 раз быстрее, поэтому, если вы сидите там с несколькими тысячами строк кода, и вы хотите оптимизировать указанный код, тогда getElementById - это путь.

Наконец,

document.querySelector("[id=elem]");

Я лично не вижу необходимости использовать это в любой ситуации. Если вам нужен запросSelector, почему бы просто не использовать #? Это в точности эквивалентно вашему первому примеру querySelector, однако в нем много бесполезных символов.

Изменить: просто чтобы быть ясным, в общем, вам, вероятно, лучше использовать document.getElementById.

Ответ 3

есть ли разница в производительности

Возможно, поскольку они разные функции. querySelector по крайней мере необходимо проанализировать селектор, прежде чем обнаруживать, что он равен getElementById. И я сомневаюсь, что эта оптимизация выполняется для селектора атрибутов вообще, никто его не использует. Поэтому я разделяю ваши предположения; и тесты подтверждают их (благодаря @Silver_Clash).

Лично мне не нравится второй, поскольку он более двусмыслен и ужасен для использования с динамическими значениями id. Явно использование getElementById является более кратким.