Pourquoi les navigateurs correspondent-ils aux sélecteurs CSS de droite à gauche?
Les sélecteurs CSS correspondent aux moteurs de navigateur de droite à gauche. Alors, ils trouvent d'abord les enfants, puis vérifient auprès de leurs parents s'ils correspondent au reste de la règle.
- Pourquoi est-ce?
- Est-ce juste parce que la spécification dit?
- Cela affecte-t-il la mise en page éventuelle si elle est évaluée de gauche à droite?
Pour moi, la façon la plus simple de le faire serait d’utiliser les sélecteurs avec le moins d’éléments. Donc, les identifiants d’abord (car ils ne devraient renvoyer qu’un seul élément). Alors peut-être des classes ou un élément qui a le plus petit nombre de nœuds - par ex. il ne peut y avoir qu'un seul intervalle sur la page; accédez donc directement à ce nœud avec toute règle faisant référence à un intervalle.
Voici quelques liens pour sauvegarder mes revendications
- http://code.google.com/speed/page-speed/docs/rendering.html
- https://developer.mozilla.org/en/Writing_Efficient_CSS
On dirait que c'est fait de cette façon pour éviter de devoir regarder tous les enfants du parent (qui pourraient être nombreux) plutôt que tous les parents d'un enfant qui doit en être un. Même si le DOM est profond, il ne consulte qu'un seul nœud par niveau plutôt que plusieurs dans la correspondance RTL. Est-il plus facile/plus rapide d’évaluer les sélecteurs CSS LTR ou RTL?
Gardez à l'esprit que lorsqu'un navigateur effectue une correspondance de sélecteur, il possède un élément (celui pour lequel il tente de déterminer le style), ainsi que toutes vos règles et leurs sélecteurs. Il doit rechercher les règles correspondant à l'élément. Ceci est différent de la chose jQuery habituelle, disons, où vous n’avez qu’un sélecteur et vous devez trouver tous les éléments qui correspondent à ce sélecteur.
Si vous ne disposez que d'un sélecteur et d'un seul élément à comparer avec ce sélecteur, le sens de gauche à droite est plus logique dans certains cas. Mais c'est décidément pas la situation du navigateur. Le navigateur essaie de restituer Gmail ou quoi que ce soit et a celui <span> il essaie de styler et les 10 000 règles et plus que Gmail a insérées dans sa feuille de style (je ne compose pas ce nombre).
En particulier, dans les cas où le navigateur examine la plupart des sélecteurs qu'il considère ne correspondent pas à l'élément en question. Le problème consiste donc à décider qu'un sélecteur ne correspond pas le plus rapidement possible; si cela nécessite un peu de travail supplémentaire dans les cas qui correspondent, vous gagnez toujours grâce au travail que vous enregistrez dans les cas qui ne correspondent pas.
Si vous commencez simplement par faire correspondre la partie la plus à droite du sélecteur à votre élément, il y a de fortes chances que cela ne corresponde pas et que vous avez terminé. Si cela correspond, vous devez faire plus de travail, mais uniquement proportionnellement à la profondeur de votre arbre, qui n'est pas très grande dans la plupart des cas.
Par contre, si vous commencez par faire correspondre la partie la plus à gauche du sélecteur ... à quoi la comparez-vous? Vous devez commencer à parcourir le DOM, à la recherche de nœuds qui pourraient lui correspondre. Il suffit de découvrir que rien ne correspond à la partie la plus à gauche peut prendre un certain temps.
Les navigateurs correspondent donc de la droite; cela donne un point de départ évident et vous permet de vous débarrasser très rapidement de la plupart des sélecteurs candidats. Vous pouvez voir des données à l'adresse http://groups.google.com/group/mozilla.dev.tech.layout/browse_thread/thread/b185e455a0b3562a/7db34de545c17665 (bien que la notation soit déroutante), mais le En résumé, pour Gmail en particulier il y a deux ans, pour 70% des paires (règle, élément), vous pouvez décider que la règle ne correspond pas après avoir simplement examiné les parties balise/classe/id du sélecteur le plus à droite pour la règle. Le nombre correspondant de la suite de tests de performances de pageload de Mozilla était de 72%. Il vaut donc vraiment la peine d'essayer de se débarrasser de ces 2/3 de toutes les règles le plus rapidement possible et de ne s'inquiéter que de l'appariement du tiers restant.
Notez également qu'il existe d'autres optimisations que les navigateurs effectuent 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 identifiant et que cet identifiant ne correspond pas à l'identifiant de l'élément, il n'y aura aucune tentative de faire correspondre ce sélecteur à cet élément dans Gecko: l'ensemble des "sélecteurs avec ID" qui sont essayés provient d'une recherche de hashtable sur l'ID de l'élément. Donc, cela représente 70% des règles qui ont de bonnes chances de correspondre à ce que ne correspond toujours pas après avoir uniquement pris en compte le tag/class/id de le sélecteur le plus à droite.
L'analyse syntaxique de droite à gauche, également appelée , l'analyse syntaxique ascendante est réellement efficace pour le navigateur.
Considérer ce qui suit:
_#menu ul li a { color: #00f; }
_Le navigateur commence par rechercher a, puis li, puis ul, puis #menu.
En effet, comme le navigateur numérise la page, il lui suffit de regarder l'élément/nœud actuel et tous les nœuds/éléments précédents analysés.
La chose à noter est que le navigateur commence à traiter au moment où il obtient un tag/nœud complet et n'a pas besoin d'attendre la page entière sauf quand trouve un script, auquel cas il suspend temporairement son exécution, puis son exécution, puis avance.
Dans le cas contraire, cela sera inefficace car le navigateur a trouvé l'élément qu'il scannait lors du premier contrôle, mais il a ensuite été obligé de continuer à parcourir le document à la recherche de tous les sélecteurs supplémentaires. Pour cela, le navigateur doit avoir l'intégralité du code HTML et peut éventuellement avoir besoin de numériser toute la page avant de commencer la peinture CSS.
Ceci est contraire à la façon dont la plupart des bibliothèques analysent dom. Là, le dom est construit et il n’est pas nécessaire de parcourir toute la page, il suffit de trouver le premier élément, puis de faire correspondre les autres à l’intérieur.
Cela permet de passer du plus spécifique au moins spécifique. Il permet également un court-circuit en application. Si la règle plus spécifique s'applique à tous les aspects auxquels la règle parent s'applique, toutes les règles parent sont ignorées. S'il existe d'autres bits dans le parent, ils sont appliqués.
Si vous agissiez dans le sens inverse, vous formateriez en fonction du parent, puis vous écraseriez à chaque fois que l'enfant a quelque chose de différent. À long terme, cela représente beaucoup plus de travail que d'ignorer les éléments des règles déjà prises en charge.