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


1 Answers

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

Considera lo siguiente:

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

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

Esto se debe a que a medida que el navegador escanea la página, solo necesita mirar el elemento / nodo actual y todos los nodos / elementos anteriores que ha escaneado.

Lo que hay que tener en cuenta es que el navegador comienza a procesarse en el momento en que obtiene una etiqueta / nodo completos y no tiene que esperar toda la página, excepto cuando encuentra un script, en cuyo caso se detiene temporalmente y completa la ejecución del script y luego va hacia adelante

Si lo hace al revés, será ineficaz porque el navegador encontró el elemento que estaba escaneando en la primera comprobación, pero luego se vio obligado a continuar mirando a través del documento para todos los selectores adicionales. Para esto, el navegador debe tener el código HTML completo y es posible que deba escanear toda la página antes de que comience a pintar CSS.

Esto es contrario a la manera en que la mayoría de las bibliotecas analizan el dominio. Allí se construye el dom y no es necesario escanear toda la página, solo encuentra el primer elemento y luego sigue coincidiendo con otros dentro de ella.

html css browser css-selectors

Los selectores de CSS coinciden con los motores del navegador de derecha a izquierda. Así que primero encuentran a los niños y luego verifican 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 la especificación dice?
  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. Así que las identificaciones primero (ya que solo deben devolver 1 elemento). Entonces, tal vez las clases o un elemento que tenga la menor cantidad de nodos; por ejemplo, solo puede haber un intervalo en la página, así que vaya directamente a ese nodo con cualquier regla que haga referencia a un intervalo.

Aquí hay algunos enlaces que respaldan mis reclamos.

  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 los padres (que podrían ser muchos) en lugar de a todos los padres de un niño que deben ser uno. Incluso si el DOM es profundo, solo miraría un nodo por nivel en lugar de múltiples en la coincidencia RTL. ¿Es más fácil / rápido evaluar los selectores de CSS LTR o RTL?



Related