CSS и скорость сортировки jQuery

В jQuery всякий раз, когда я сталкиваюсь с чем-то вроде этого:

$("div#MyDiv").....

Я обычно говорю разработчику: "Не утруждайте себя переносом div перед #MyDiv, селекторы ID являются самыми быстрыми". То есть.

$("#MyDiv")....

Это связано с тем, что последний подключается непосредственно к document.getElementById вместо того, чтобы сначала сканировать DOM для всех элементов <div>.

Мой вопрос: применяются ли те же правила к селекторам CSS? То есть а не:

div#MyDiv
{
}

Быстрее ли это просто?:

#MyDiv
{
}

(Я понимаю, что селектора CSS невероятно быстрые, так что на самом деле ни один из них не будет иметь существенных отличий.)

Большое спасибо

ИЗМЕНИТЬ

Любые ссылки или ссылки могут быть полезны для целей этого обсуждения. Спасибо: -)

Ответ 1

Я бы сказал, что он крайне маловероятен, что он делает любую реальную разницу. Теоретически, да, требуется меньше проверки (потому что div#foo действительно должен быть div, чтобы соответствовать селектору, согласно spec). Но вероятность того, что это изменит реальное приложение для браузера? Около нуля.

Тем не менее, я всегда сжимаю, когда вижу такие вещи, как div#foo в приложениях HTML. HTML имеет только один атрибут ID-типа (id), поэтому нет необходимости в дополнительной квалификации. Вы заставляете механизм селектора CSS (или браузер или jQuery) усердно работать, чтобы понять, что вы имеете в виду, вы делаете селектор хрупким (если div становится footer, например) и т.д., И, конечно же, вы не оставляйте себя открытым для реализации селектора stoopid, который не может распознать, что он может что-то посмотреть по идентификатору, а затем проверить, есть ли он div и поэтому просматривает все div s. (Существует ли такая реализация? Возможно, вы никогда не знаете.) Запрещая некоторые случаи краев, это всегда заставляет меня думать, что кто-то не совсем знает, что они делают.

Итак, для меня скорость не является главным аргументом. Беспредметность есть.; -)

Ответ 2

да, это быстрее из-за разбора и потому, что браузер не должен проверять, является ли элемент также <div>. (для нескольких правил разница в скорости не воспринимается пользователем)

Ответ 3

Согласно этой статье Mozilla, это действительно имеет значение, хотя и минута. (Обратите внимание, что, хотя в этой статье обсуждаются моделирование пользовательских интерфейсов XUL, механизм компоновки Gecko используется как для отображения пользовательского интерфейса Firefox, так и на веб-страницах, которые он загружает.)

Идентификатор предназначен для применения к одному элементу в DOM в любом случае, поэтому удар по производительности, связанный с попыткой сопоставить имя тега, совершенно не нужен, значителен или нет. Не говоря уже о том, что в вашей таблице стилей будет потрачено несколько байт.