Один тэг, несколько атрибутов - быстрее блокировать запросы с помощью фильтра или использовать несколько селекторов? - PullRequest
3 голосов
/ 03 марта 2011

Мне интересно, какой из следующих запросов jQuery будет быстрее.Я ищу, чтобы соответствовать любые теги span, которые имеют либо атрибут src, либо атрибут data-src.

var a = $('span[src],span[data-src]');


var b = $('span').filter('[src],[data-src]');

У меня ощущение кишки (б), но могут быть и оптимизмы, о которых я не знаю.

Спасибо.

ОБНОВЛЕНИЕ:

Основано на быстром тесте с элементами 100 x span[src], 100 x span[data-src] и 100 x span: (a) результат был примерно в 4-8 раз быстрее в зависимости от браузера.В IE8 это было намного быстрее (примерно в 50 раз), а в IE6 / 7 - примерно одинаково.

Что мне интересно, так почему это быстрее?

В случае (a) jquery делегирует весь запрос селектора нативному querySelectorAll, где доступно.Таким образом, то, что выглядит как более медленный запрос, на самом деле очень быстро в современных браузерах.

Ответы [ 3 ]

1 голос
/ 03 марта 2011

Первая версия будет делать два прохода полного дерева DOM;тогда как второй только один раз .

Реальный ответ требует профилирования для вашего конкретного случая, т.е. в зависимости от того, насколько сложен ваш DOM.Кроме того, разные версии jQuery могут привести к разным результатам.

1 голос
/ 03 марта 2011

При http://jsfiddle.net/B9Vmy/1/ я выполнил несколько тестов (используйте firebug для консоли)

для 6000 пролетов (2000 пролетов, 2000 с src, 2000, 2000 с data-src)около 8 мс, поэтому выбор части пренебрежимо мал.Что делает это настолько медленным, так это создание объектов jQuery (jQuery (элемент)).

Хотя A делает это только один раз только для возвращаемых результатов, B делает это для каждого элемента, после чего использует эти результаты иделает это снова для возвращенных результатов.

А еще есть движок шипения, который можно использовать для выбора элементов ... Посмотрите на время фильтра для смеха: -)

1 голос
/ 03 марта 2011

Это просто гипотеза, в большей степени основанная на логике, чем на тесте.

В первом случае селектор выберет атрибут span с src.

Во втором случаеселектор выберет все span и затем отфильтрует span с помощью attr src.

Итак, сначала будет быстрее.

Если я ошибаюсь, поправьте меня

...