Скорость выбора CSS и jQuery - PullRequest
10 голосов
/ 04 ноября 2010

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

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

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

$("#MyDiv")....

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

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

div#MyDiv
{
}

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

#MyDiv
{
}

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

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

РЕДАКТИРОВАТЬ

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

Ответы [ 3 ]

11 голосов
/ 04 ноября 2010

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

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

Так что для меня скорость не главный аргумент. Бессмысленность есть. ; -)

2 голосов
/ 04 ноября 2010

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

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

2 голосов
/ 04 ноября 2010

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

...