Оптимизация селектора jQuery

Question

Будьте точны с правой стороны вашего селектора и менее точны с левой стороны.

// unoptimized
$('div.data .gonzalez');

// optimized
$('.data td.gonzalez');

Источник цитирования

1. Может ли кто-нибудь объяснить, почему менее специфичный левый элемент быстрее работает в качестве селектора CSS?

2. Это что-то вроде Sizzle или то же самое относится к document.querySelectorAll?

3. Есть ли прирост скорости с использованием "аналогично оптимизированных" CSS-селекторов в файлах CSS?

Answer 1

Селекторы разбора jQuery Sizzle Engine справа налево, так что это правда.Однако есть исключения, например, когда первый операнд является идентификатором.Тогда поиск будет работать в контексте элемента с этим идентификатором.Это особенность Sizzle Engine, но я не знаю, как реализован querySelectorForAll.

Пример:

$('div.data .gonzalez');

Sizzle получит все элементы DOM с классом gonzalez, затем провериткаждый, если предок является тегом div с данными класса

Answer 2

Книга вроде бы упоминает об этом попутно, но я вполне уверен, что этот совет относится только к Sizzle (механизм выбора jQuery), а не вообще.Ваш пробег может отличаться, но браузер, который реализует querySelectorAll, вряд ли покажет реальную разницу.

Sizzle работает наизнанку, когда это уместно, и поэтому может искать td.gonzales, а затем посмотреть, чтобы увидетьесли это в пределах .data, а не наоборот.Я помню, когда Sizzle впервые вышел, это было немного неожиданно, но на самом деле все получилось лучше.Таким образом, вы можете понять, почему, чем конкретнее правая часть селектора-потомка, тем лучше.

Вот контрольный пример , попробуйте в IE7, и вы увидите отмеченное предпочтениедля более конкретной правой стороны.Но попробуйте это в современном браузере, и вам, по-видимому, не должно быть никакой разницы.

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