Будь конкретным в правой части вашего селектора и менее конкретным слева.
// unoptimized
$('div.data .gonzalez');
// optimized
$('.data td.gonzalez');
Может ли кто-нибудь объяснить, почему менее конкретный слева быстрее, чем селектор CSS?
Это вещь Sizzle или она применяется для document.querySelectorAll?
Есть ли увеличение скорости с использованием "аналогично оптимизированных" селекторов CSS в файлах CSS?
jQuery Sizzle Engine синтаксические селектора справа налево, так что это правда. Есть исключения, хотя, например, когда первый операнд является идентификатором. Затем поиск будет действовать в контексте элемента с этим идентификатором. Это особенность Sizzle Engine, но я не знаю, как реализуется querySelectorForAll.
Пример:
$('div.data .gonzalez');
Sizzle получит все элементы DOM с классом gonzalez, затем проверяет каждый, если предком является тег div с данными класса
В книге упоминается об этом попутно, но я вполне уверен, что совет относится к Sizzle (движок селектора jQuery), а не вообще. Ваш пробег может отличаться, но браузер, который реализует querySelectorAll, вряд ли покажет реальную разницу.
Sizzle работает, если это необходимо, изнутри, и поэтому может искать td.gonzales, а затем посмотреть, находится ли он внутри .data, а не наоборот. Я помню, когда Sizzle впервые вышел, это было немного неожиданностью, но на самом деле это получилось лучше. Итак, вы можете понять, почему более конкретная правая часть селектора-потомка, тем лучше.
Здесь тестовый пример, попробуйте это в IE7, и вы увидите заметное предпочтение для более конкретной правой стороны. Но попробуйте его в современном браузере, и вы должны казаться, в основном, никакой разницы.
Это все микро-оптимизация, хотя и в значительной степени бесполезная в отсутствие реальной проблемы для решения, потому что она сильно варьируется в зависимости от элементов на вашей странице. Полезно помнить, если у вас на самом деле есть медленный селектор, который может вызвать проблемы у старых браузеров, но, кроме этого,...