Articles avec le tag ‘sélecteur’

Corrélation entre le temps de rendu et la complexité CSS

Lundi 6 juillet 2009

On en a parlé plusieurs fois. Le temps de reflow d’un navigateur est dépendant de la complexité des feuilles de style, et particulièrement de la complexité des sélecteurs CSS.

Google Page Speed y fait référence mais si vous voulez être convaincus il faut aller voir la présentation de Steve Souders aux conférences Velocity 2009. À l’écran 75 on trouve un graphique qui vérifie la corrélation entre le nombre de règles CSS, le nombre de sélecteurs complexes, et le temps nécessaire au reflow. (Lire la suite…)

Questions de rendu

Jeudi 27 novembre 2008

Ce lien on me l’a donné plus d’une douzaine de fois, et c’est vrai que c’est intéressant. Je regrette même de ne pas avoir eu une intervention similaire pour Paris Web 2008.

De quoi je parle ? de l’intervention de David Baron aux Tech Talks de Google le 18 novembre dernier. David Baron c’est un ingénieur de Mozilla, depuis les débuts en 98, impliqué dans les spcécifications et implémentations CSS. Quand il parle il sait ce qu’il dit. (Lire la suite…)

Performance des sélecteurs CSS, encore un mot

Vendredi 17 octobre 2008

On reparle des performances CSS. Souvenez-vous, je vous avais parlé d’un document de Mozilla faisant état des sélecteurs plus ou moins performants. S’était ensuivi une discussion à propos de la pertinence de tels sujets vu la différence de performance mise en oeuvre.

Je vous invite à relire ce second billet, qui résume assez bien. Si on remet le couvert c’est que Jon Sykes a refait un troisième test tout récemment, avec un graphique assez sympa

(Lire la suite…)

Gains de performance des sélecteurs CSS

Lundi 12 mai 2008

Je parlais il y a quelques jours de performance des sélecteurs CSS. Il y a eu quelques réactions et j’ai échoué dans mes explications : les différences de performance dont on parle ici sont probablement négligeables la plupart du temps. Hors commentaires, certains m’ont rappelé que la documentation de Mozilla concerne d’ailleurs au départ les interfaces XUL avec de gros documents XML complexes agrémentés de très grosses feuilles de style.

Quelle importance ?

Il n’y a pas lieu de refaire vos CSS ou de commencer à mettre en place des solutions qui handicapent la maintenance du site (par exemple ne plus utiliser aucun sélecteur descendant). Il y a toutefois parfois utilité. Sur de grosses pages spéciales ou simplement sur les gros sites, ça peut avoir une influence. (Lire la suite…)

Performance des sélecteurs CSS

Lundi 5 mai 2008

Nous avons peu d’informations officielles de la part des navigateurs sur les performances de leurs moteurs. Le Mozilla Developer Center nous propose tout de même une courte page sur comment écrire des feuilles de style efficaces.

Dans ce billet j’appellerai critère une partie de sélecteur qui contient un identifiant, une classe, un nom de balise ou * (par exemple : #back, *:link, .selected, input[type="text"], ou ul.menu). Les directives de l’article de Mozilla peuvent être regroupées en quatre groupes :

  • n’utilisez pas de critère universel ;
  • dans un critère utilisez un identifiant, une classe ou un nom de balise mais pas une combinaison de deux ou trois ;
  • limitez le nombre de critères dans vos sélecteurs ;
  • profitez de la cascade en appliquant les règles le plus haut possible. (Lire la suite…)