Pregunta ¿Por qué los navegadores coinciden con los selectores de CSS de derecha a izquierda?


Los selectores CSS se corresponden con los motores de búsqueda de derecha a izquierda. Entonces primero encuentran a los niños y luego revisan a sus padres para ver si coinciden con el resto de las partes de la regla.

  1. ¿Por qué es esto?
  2. ¿Es solo porque dice la especificación?
  3. ¿Afecta el diseño final si se evaluó de izquierda a derecha?

Para mí, la forma más sencilla de hacerlo sería utilizar los selectores con el menor número de elementos. Entonces ID primero (ya que solo deberían devolver 1 elemento). Entonces tal vez las clases o un elemento que tiene la menor cantidad de nodos, p. solo puede haber un tramo en la página, así que vaya directamente a ese nodo con cualquier regla que haga referencia a un tramo.

Aquí hay algunos enlaces que respaldan mis afirmaciones

  1. http://code.google.com/speed/page-speed/docs/rendering.html
  2. https://developer.mozilla.org/en/Writing_Efficient_CSS

Parece que se hace de esta manera para evitar tener que mirar a todos los hijos de padres (que podrían ser muchos) en lugar de a todos los padres de un niño, que debe ser uno. Incluso si el DOM es profundo, solo vería un nodo por nivel en lugar de múltiples en la concordancia de RTL. ¿Es más fácil / más rápido evaluar los selectores de CSS LTR o RTL?


504
2018-04-26 22:03


origen


Respuestas:


Tenga en cuenta que cuando un navegador está haciendo coincidir selector tiene un elemento (para el que está tratando de determinar el estilo) y todas sus reglas y selectores, y necesita encontrar qué reglas coinciden con el elemento. Esto es diferente de lo habitual en jQuery, por ejemplo, donde solo tiene un selector y necesita encontrar todos los elementos que coinciden con ese selector.

Si solo tenía un selector y solo un elemento para comparar con ese selector, de izquierda a derecha tiene más sentido en algunos casos. Pero eso es decididamente no la situación del navegador. El navegador está tratando de renderizar Gmail o lo que sea y tiene uno <span> está tratando de diseñar y las más de 10.000 reglas que Gmail pone en su hoja de estilo (no estoy haciendo ese número).

En particular, en la situación, el navegador está mirando a la mayoría de los selectores que está considerando no lo hagas hacer coincidir el elemento en cuestión. Entonces, el problema es decidir si un selector no coincide lo más rápido posible; Si eso requiere un poco de trabajo extra en los casos que coinciden, usted todavía gana debido a todo el trabajo que ahorra en los casos que no coinciden.

Si comienzas por hacer coincidir la parte más a la derecha del selector con tu elemento, es probable que no coincida y listo. Si coincide, tienes que hacer más trabajo, pero solo proporcional a la profundidad de tu árbol, que no es tan grande en la mayoría de los casos.

Por otro lado, si comienzas haciendo coincidir la parte más a la izquierda del selector ... ¿con qué lo combinas? Tienes que comenzar a caminar por el DOM, buscando nodos que puedan coincidir con él. Descubrir que no hay nada que coincida con la parte más a la izquierda puede llevar un tiempo.

Así que los navegadores coinciden desde la derecha; da un punto de partida obvio y le permite deshacerse de la mayoría de los selectores candidatos muy rápidamente. Puedes ver algunos datos en http://groups.google.com/group/mozilla.dev.tech.layout/browse_thread/thread/b185e455a0b3562a/7db34de545c17665 (aunque la notación es confusa), pero el resultado es que para Gmail en particular hace dos años, para el 70% de los pares (regla, elemento) puede decidir que la regla no coincide después de examinar la etiqueta / clase / ID partes del selector más a la derecha para la regla. El número correspondiente para el conjunto de pruebas de rendimiento de carga de página de Mozilla fue del 72%. Así que realmente vale la pena tratar de deshacerse de esos 2/3 de todas las reglas tan rápido como puedas y luego solo preocuparte por igualar el 1/3 restante.

Tenga en cuenta también que hay otras optimizaciones que los navegadores ya hacen para evitar incluso tratar de hacer coincidir las reglas que definitivamente no coincidirán. Por ejemplo, si el selector situado más a la derecha tiene una identificación y esa identificación no coincide con la identificación del elemento, no se intentará hacer coincidir ese selector con ese elemento en Gecko: el conjunto de "selectores con ID" que se intentan proviene de una búsqueda de hashtable en la identificación del elemento. Entonces este es el 70% de las reglas que tienen una buena posibilidad de igualar ese todavía no coinciden después de considerar solo la etiqueta / clase / id del selector situado más a la derecha.


765
2018-04-28 04:36



Analizando de derecha a izquierda, también llamado como análisis de abajo hacia arriba es realmente eficiente para el navegador.

Considera lo siguiente:

#menu ul li a { color: #00f; }

El navegador primero busca a, entonces li, entonces ul, y entonces #menu.

Esto se debe a que, como el navegador está escaneando la página, solo necesita mirar el elemento / nodo actual y todos los nodos / elementos previos que ha escaneado.

Lo que hay que notar es que el navegador comienza a procesar el momento recibe una etiqueta / nodo completo y no necesita esperar toda la página, excepto cuando encuentra un script, en cuyo caso pausa temporalmente y completa la ejecución del script y luego continúa.

Si lo hace al revés, será ineficiente porque el navegador encontró el elemento que estaba escaneando en la primera comprobación, pero luego se vio obligado a seguir buscando en el documento todos los selectores adicionales. Para esto el navegador necesita tener todo el html y puede necesitar escanear toda la página antes de que empiece a pintar css.

Esto es contrario a cómo la mayoría de las libs analizan. Allí se construye el dom y no necesita escanear toda la página simplemente busque el primer elemento y luego continúe emparejando otros dentro de él.


20
2018-02-18 10:04



Permite la conexión en cascada de lo más específico a lo menos específico. También permite un cortocircuito en la aplicación. Si la regla más específica se aplica en todos los aspectos a los que se aplica la regla principal, se ignoran todas las reglas principales. Si hay otros bits en el elemento primario, se aplican.

Si fue al revés, formateará de acuerdo con los padres y luego sobrescribirá cada vez que el niño tenga algo diferente. A la larga, esto es mucho más trabajo que ignorar los artículos en las reglas que ya se han tenido en cuenta.


18
2018-04-26 22:13