Самый быстрый метод выбора в jquery и CSS - ID или нет?

Question

Что быстрее всего в jquery / javascript?

$('#myID .myClass')

или

$('.myClass')

Что лучше всего использовать в CSS?

#myID .myClass{}

или

.myClass{}

Теперь я понимаю, что должен был объяснить лучше.Извините!

Идентификатор Ofceauce - более быстрый селектор в CSS и JavaScript.Но иногда вам нужно использовать класс, поскольку есть несколько селекторов.

Скажем, например, что у меня есть БОЛЬШОЙ HTML-документ.В середине страницы у меня есть:

<div id="myID">

<a class="myClass">link1</a>

<a class="myClass">link1</a>

<a class="myClass">link1</a>

</div>

Если я хочу настроить таргетинг на все "myClass".Тогда было бы лучше нацелить ID прежде, чем предназначаться для классов?(тогда мне не пришлось бы делать domtravel всего HTML-документа) Например ::

Было бы это:

$ ('# myID'). find ('. myClass')

Быть быстрее, чем:

$ ('. MyClass')

Answer 1

Мой тестирование в современных браузерах предполагает, что вы должны использовать либо

$('#id').find('.class') // or
$('.class')

, но , а не ,

$('#id .class')

Причина в том, что все современные браузеры реализуют getElementsByClassName, что приводит к почти постоянному поиску по времени по имени класса (при условии реализации хэша).Какие браузеры современны - это еще один субъективный вопрос.

Answer 2

Они примерно одинаковы в большинстве современных браузеров, поскольку имена классов внутренне хэшируются.Разница в том, что в старых браузерах нет .getElementsByClassName или эквивалентного метода, поэтому .myClass внутренне анализируется в jQuery, а КАЖДЫЙ элемент в dom обходит и проверяет имя класса (или использует XPath, когда это возможно).

Всегда старайтесь по возможности использовать #myID .myClass, поскольку это позволяет jQuery переходить непосредственно к #myID и перемещаться оттуда при необходимости.

Answer 3

Хороший вопрос на самом деле.

Скажем, вы проанализировали DOM из N элементов максимальной глубины D и CSS из S правил. Тогда задача поиска стилей для всех элементов имеет вычислительную сложность примерно O(N*D*S).

Очевидно, что не все селекторы CSS имеют одинаковую сложность вычислений.

Например, li.item селектор и li[class ~= "item"] требуют точно таких же ресурсов ЦП, что и их эквиваленты. li[class = "item"] может быть вычислено быстрее, так как не требует сканирования пробелов.

# 1 селектор здесь:

#myID .myClass{} /* #1 */
.myClass{} /* #2 */

требуется больше ресурсов ЦП, поскольку вам нужно выполнять точно такой же объем работы, что и в случае №2, плюс вам нужно будет сканировать цепочку родительских / дочерних элементов (из элементов максимум D), чтобы найти элемент с «myID».

Это все о чистых селекторах CSS.

В jQuery & friends ситуация может быть несколько иной. Теоретически движок jQuery может использовать document.getElementById(), чтобы минимизировать набор поиска (поэтому уменьшите число N), но это не будет соответствовать поведению CSS. Вот пример: http://jsfiddle.net/dnsUF/. Здесь jQuery сообщает об одном элементе с #foo, но на самом деле таких элементов два.

Резюме:

• В случае CSS # 2 быстрее
• В случае jQuery # 1 может быть быстрее (но технически может быть неправильным в смысле CSS).

Вот моя статья о сложности селектора CSS: http://www.terrainformatica.com/2008/07/csss-and-computational-complexity-of-selectors/ И это один из способов улучшить его, используя наборы стилей: http://www.terrainformatica.com/2010/09/style-sets-in-h-smile-core/

Answer 4

Давайте просто подумаем об этом логически на секунду и представим, что вы ничего не знали о том, как встроен браузер или как он обращается к DOM, но вы предполагаете, что все, что он делает, логично.

Следовательно, разве не понятно, что из двух селекторов самый узкий будет быстрее находить ваши результаты?

У вас есть два селектора, которые переводят на грубый английский как

1. Любой элемент класса myClass, который является дочерним элементом элемента с идентификатором myID
2. Любой элемент класса myClass

Что касается «Что лучше всего использовать в CSS», то это совершенно субъективно, так как это зависит от того, нацелены ли вы на все экземпляры .myClass или только на те, которые являются потомками #myID .

Answer 5

#myID .myClass - определенно лучший способ получить доступ к элементу, если у вас есть много элементов, к которым применяется .myClass.

Answer 6

Да, id - один из самых быстрых способов доступа к элементу.Проверьте это испытание http://mootools.net/slickspeed/.

Answer 7

ID всегда будут самым быстрым способом доступа к элементу, поскольку они уникальны.

Answer 8

Обновление - 2015 - проверьте себя здесь
https://jsperf.com/id-vs-class-vs-tag-selectors/2

TL; DR;

Использование ID $ ("# foo") почти в 4 раза быстрее, чем CSS $ (". Bar") на моем Chrome 41 на Linux 64bit