Pourquoi les navigateurs correspondent-ils aux sélecteurs CSS de droite à gauche?

gardez à l'esprit que lorsqu'un navigateur fait la correspondance avec un sélecteur, il a un élément (celui pour lequel il essaie de déterminer le style) et toutes vos règles et leurs sélecteurs et il a besoin de trouver quelles règles correspondent à l'élément. C'est différent de l'habituel jQuery chose, disons, où vous avez seulement un sélecteur et vous devez trouver tous les éléments qui correspondent au sélecteur.

Si vous n'aviez qu'un sélecteur et un seul élément à comparer à qui sélecteur, puis de gauche à droite fait plus de sens dans certains cas. Mais c'est décidément pas la situation du navigateur. Le navigateur essaie de rendre Gmail ou quoi que ce soit et a celui <span> il essaie de style et les 10.000+ règles Gmail met dans sa feuille de style (Je ne fais pas ce nombre vers le haut).

en particulier, dans la situation où le navigateur regarde la plupart des sélecteurs, il considère ne correspondre à l'élément en question. Le problème est donc de décider qu'un sélecteur ne correspond pas aussi vite que possible; si cela nécessite un peu de travail supplémentaire dans les cas qui correspondent, vous gagnez quand même en raison de tout le travail que vous enregistrez dans les cas qui ne correspondent pas.

si vous commencez par faire correspondre la partie la plus à droite du sélecteur avec votre élément, alors il y a des chances qu'il ne corresponde pas et vous avez terminé. Si elle correspond, vous avez à faire plus de travail, mais seulement proportionnelle à votre profondeur de l'arbre, qui n'est pas de gros dans la plupart des cas.

par contre, si vous commencez par faire correspondre la partie la plus à gauche du sélecteur... que pensez-vous du match contre? Vous devez commencer à marcher sur le DOM, à la recherche de nœuds qui pourraient correspondre. Je découvre qu'il n'y a rien qui corresponde à la partie la plus à gauche qui pourrait prendre un moment.

si les navigateurs match à partir de la droite; il donne un point de départ évident et vous permet de se débarrasser de la plupart des candidats sélecteurs très rapidement. Vous pouvez voir quelques données à http://groups.google.com/group/mozilla.dev.tech.layout/browse_thread/thread/b185e455a0b3562a/7db34de545c17665 (bien que la notation soit confuse), mais le résultat est que pour Gmail en particulier il y a deux ans, pour 70% des paires (rule, element) vous pourriez décider que la règle ne correspond pas après avoir simplement examiné les parties tag/class/id du sélecteur le plus à droite pour la règle. Le nombre correspondant pour la suite de tests de performances pageload de Mozilla était de 72%. Donc, il est vraiment intéressant d'essayer de se débarrasser de ces 2/3 de toutes les règles aussi vite que vous le pouvez et puis ne vous souciez de faire correspondre le tiers restant.

Notez aussi qu'il existe d'autres optimisations que les navigateurs font déjà pour éviter même d'essayer de faire correspondre des règles qui ne correspondront certainement pas. Par exemple, si le sélecteur le plus à droite a un id et que cet id ne correspond pas à l'id de l'élément, alors il n'y aura aucune tentative de faire correspondre ce sélecteur à cet élément dans Gecko: l'ensemble de "sélecteurs avec les Identifiants qui sont tenté vient d'une table de hachage de recherche sur l'identification de l'élément. Donc c'est 70% des règles qui ont une assez bonne chance de correspondre que encore ne correspondent pas après avoir considéré juste l'étiquette/classe/id du sélecteur le plus à droite.