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

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

$('#myID .myClass')

или

$('.myClass')

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

#myID .myClass{}

или

.myClass{}

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

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

Скажем, например, что у меня есть документ BIG html. В середине страницы у меня есть:

<div id="myID">

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

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

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

</div>

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

Будет ли это:

$( '# MyId'). Найти (". MyClass')

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

$(". MyClass')

ОТВЕТЫ

Ответ 1

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

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

но не,

$('#id .class')

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

Ответ 2

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

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

Ответ 3

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

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

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

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

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

Ответ 4

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

Скажем, вы проанализировали 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 и друзья ситуация может быть немного иной. Теоретически механизм 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/

Ответ 5

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

Ответ 6

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

Ответ 7

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

Ответ 8

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

TL; DR;

Использование ID $( "# foo" ) почти в 4 раза быстрее, чем CSS $( ". bar" ) на моем chrome 41 на linux 64bits