В чем разница между Sizzle и document.querySelectorAll

Question

Насколько я знаю, Sizzle и querySelector/querySelectorAll являются селекторами CSS. Итак ... В чем разница между загрузкой Sizzle и выполнением:

Sizzle("my CSS query")

и

document.querySelectorAll("my CSS query")

Кроме того, я знаю, что Sizzle возвращает массив элемента, тогда как querySelectorAll возвращает NodeList (в большинстве браузеров). Я также знаю, что вам нужно загрузить Sizzle и что вы можете использовать document.querySelector только для одного элемента.

Так есть ли другая разница в производительности?

РЕДАКТИРОВАТЬ : Мой вопрос только о двигателе селектора Sizzle (и querySelectorAll). Пожалуйста, не включайте jQuery.

Answer 1

Sizzle был создан в то время, когда querySelectorAll не существовало. И его разработка была продолжена после введения querySelectorAll, чтобы обойти ошибки браузера с ранними реализациями querySelectorAll.

Sizzle сама пытается напрямую использовать querySelectorAll и будет использовать только свой собственный DOM Обход, если или селектор не поддерживается, или известно, что он содержит ошибку для данной версии браузера. Таким образом, для современных браузеров не должно быть заметной разницы в производительности, поскольку в обоих случаях будет использоваться querySelectorAll.

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

Так что в настоящее время, и если вам не нужны пользовательские псевдоселекторы, больше нет необходимости в Sizzle. Вы будете использовать его только в том случае, если вам нужно настроить таргетинг на старые версии браузеров, которые, как известно, содержат ошибки.

Answer 2

Sizzle - это чисто-JavaScript CSS механизм выбора, разработанный для легкого добавления в библиотеку хоста.

Это побочный результат jQuery проекта, который они скажем, но когда дело доходит до различий между jQuery и Sizzle, JQuery - это сборка библиотеки, упрощающая сложный синтаксис javascript, который людям было трудно понять, и он получил сетку специально для начинающих. Так что, если вы используете JQuery, там будет много накладных расходов, в то время как sizzlers предлагают сравнительно меньше.

Предпочитается использовать querySelector, а не Sizzler, потому что это просто дополнительные накладные расходы, которые могут очень легко сделать с Vanilla JS так зачем тратить его впустую. Они оба делают одно и то же.