Test perso : hacks CSS et performances des sélecteurs
Avec l’émergence du “Web mobile”, le concept de performance web est en pleine ébullition : on peut comprendre que chaque milliseconde de perdue sur une connexion 3G est un désatre.
Parmi les thèmes où l’on entend tout et son contraire, on trouve l’idée de “Sélecteurs CSS efficients” qui prône l’usage de certains types de sélecteurs au détriment d’autres censés être plus coûteux en performance.
On en vient à diaboliser certains sélecteurs autrefois propres sur eux, voire certaines méthodes de commentaires conditionnels.
J’ai voulu procéder à une petite expérience personnelle pour en tirer quelques conclusions qui n’engagent que moi…
Le test
Le test se déroule ainsi : je crée 4 fichiers HTML composés d’un div de class=”lol” dans lequel se trouve un paragraphe.
Par ailleurs, au sein d’une feuille de styles externe, j’applique la propriété border-radius (reconnue pour être assez gourmande) sur le paragraphe. Le tout répété 1000 fois dans le fichier CSS !
Les seules différences entre les 4 feuilles de styles est le type de déclaration :
- fichier CSS 1 : 1000x un sélecteur existant + propriété existante :
.lol p {border-radius: 1337px;} - fichier CSS 2 : 1000x un sélecteur introuvable + propriété existante :
.ie7 p {border-radius: 1337px;} - fichier CSS 3 : 1000x un sélecteur existant + propriété inexistante (hack) :
.lol p {*border-radius: 1337px;} - fichier CSS 4 : 1000x un sélecteur introuvable + propriété inexistante (hack) :
.ie7 p {*border-radius: 1337px;}
Le but du jeu est de vérifier qu’il existe bel et bien une différence de performances selon les types de sélecteurs et les propriétés.
Résultats
1 : .lol p {border-radius: 1337px;} x1000
- Chargement des styles : 266ms
- (Chargement total : 518ms)
- (Chargement total sur mobile iPhone4 : 2.83s)
2 : .ie7 p {border-radius: 1337px;} x1000
- Chargement des styles : 265ms
- (Chargement total : 468ms)
- (Chargement total sur mobile iPhone4 : 2.79s)
3 : .lol p {*border-radius: 1337px;} x1000
- Chargement des styles : 360ms
- (Chargement total : 568ms)
- (Chargement total sur mobile iPhone4 : 2.49s)
4 : .ie7 p {*border-radius: 1337px;} x1000
- Chargement des styles : 265ms
- (Chargement total : 504ms)
- (Chargement total sur mobile iPhone4 : 2.5s)
Interprétation personnelle
Ce petit test amateur ne prétend pas jouer dans la cour des grands, je n’ai déployé que de maigres moyens (Firebug pour les temps de chargement bureau, et Blaze.io pour le mobile).
Cependant, s’il n’y avait qu’une seule conclusion à en tirer, c’est que les inégalités de latence entre les sélecteurs paraîssent bien minimes, voire négligeables !
A quelques exceptions près, quel que soit le sélecteur (que le navigateur le trouve ou non) et quelle que soit la propriété (hack ou non), le temps de chargement est quasiment identique, en tout cas pour des feuilles CSS de 1000 lignes et environ 34ko.
De très légères disparités apparaissent pour les cas suivants : il semble qu’une propriété “hack” appliquée à un sélecteur existant (cas n°3) soit un peu plus coûteuse en performance pour le navigateur.
J’espère que les conditions d’expérience n’étaient pas trop biaisées et que mes déductions n’en sont pas complètement fausses.
