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

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

Si solo tiene un selector y solo un elemento para comparar con ese selector, entonces de izquierda a derecha hace más sentido en algunos casos. Pero eso es decididamente no la situación del navegador. El navegador está tratando de representar Gmail o lo que sea y tiene la <span> que está tratando de estilo y las 10,000+ reglas Gmail pone en su hoja de estilo (no estoy inventando ese número).

En particular, en la situación en la que el navegador está mirando la mayoría de los selectores que está considerando no coinciden con el elemento en cuestión. Así que el problema se convierte en uno de decidir que un selector no coincide tan rápido como es posible; si requiere un poco de trabajo extra en los casos en que coinciden ganar debido a todo el trabajo que salvo en los casos que no coinciden.

Si empiezas haciendo coincidir la parte más a la derecha del selector con tu elemento, entonces es probable que no coincida y ya está. 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 usted comienza por hacer coincidir la parte más a la izquierda de la selector... ¿contra qué lo comparas? Tienes que empezar a caminar por el DOM, buscando nodos que puedan coincidir con él. Sólo descubrir que no hay nada que coincida con la parte más a la izquierda podría tomar 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), podría decidir que la regla no coincide después de examinar las partes de etiqueta/clase/id del selector más a la derecha de la regla. El número correspondiente para el conjunto de pruebas de rendimiento de carga de páginas de Mozilla fue del 72%. Así que vale la pena intentarlo para deshacerse de esos 2/3 de todas las reglas lo más rápido que pueda y luego solo preocuparse por hacer coincidir el 1/3 restante.

Tenga en cuenta también que hay otras optimizaciones que los navegadores ya hacen para evitar incluso tratar de coincidir con reglas que definitivamente no coincidirán. Por ejemplo, si el selector de la derecha tiene un id y ese id no coincide con el id del elemento, entonces no habrá ningún intento de emparejar ese selector con ese elemento en absoluto en Gecko: el conjunto de "selectores con ID" que se intentan proviene de una búsqueda de hashtable en el ID del elemento. Así que este es el 70% de las reglas que tienen una muy buena probabilidad de coincidir que todavía no coinciden después de considerar solo la etiqueta/clase/id del selector de la derecha.