javascript - type - optimización del selector jQuery

jquery[] selector

Question

Sea específico en el lado derecho de su selector, y menos específico en el izquierdo.

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

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

Fuente de cotización

1. ¿Podría alguien explicar por qué la izquierda menos específica es más rápida como un selector de CSS?

2. ¿Es esto una chispa o lo mismo se aplica para document.querySelectorAll ?

3. ¿Hay alguna ganancia de velocidad usando selectores CSS "optimizados de manera similar" en los archivos CSS?

Answer 1

El libro lo menciona de pasada, pero estoy bastante seguro de que los consejos son específicos de Sizzle (el motor de selección de jQuery), generalmente no. Su kilometraje puede variar, pero es improbable que un navegador que implementa querySelectorAll muestre una diferencia en el mundo real.

Sizzle funciona de adentro hacia afuera cuando sea apropiado, por lo que puede buscar td.gonzales y luego ver si está dentro de un .data , y no al revés. Recuerdo cuando salió Sizzle por primera vez, fue una sorpresa, pero en realidad funcionó mejor. Entonces puede ver por qué cuanto más específico es el lado derecho del selector descendente, mejor.

Aquí hay un caso de prueba , prueba eso en IE7 y verás una preferencia marcada para el lado derecho más específico. Pero pruébalo en un navegador moderno y básicamente no deberías parecer diferente.

Sin embargo, todo esto es una micro-optimización, y bastante inútil en la ausencia de un problema del mundo real para resolver, porque varía dramáticamente en función de los elementos en su página. Es útil recordar si realmente tiene un selector lento causándole problemas en navegadores más antiguos, pero aparte de eso ...

Answer 2

Los motores de sirena de jQuery''s Sizzle Engine seleccionan de derecha a izquierda, por lo que es cierto. Sin embargo, hay excepciones, por ejemplo, cuando el primer operando es una identificación. Entonces la búsqueda operará en el contexto del elemento con esta ID. Esa es una particularidad del Motor Sizzle, pero no sé cómo se implementa querySelectorForAll.

Un ejemplo:

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

Sizzle obtendrá todos los elementos del DOM con la clase gonzalez y luego verificará si cada ancestro es una etiqueta div con datos de clase