28111 sujets

CSS et mise en forme, CSS3

Impact de l'écriture des règles Css sur la rapidité d'interprétati

Bonjour,
Je suis en ce moment en cours d'apprentissage de Sass, qui permet de faire soit une inclusion de propriétés soit une extension de propriétés.
Ce qui m'amène à une question que je ne me suis jamais pausée :
Hors poids de la Css et maintenance le la Css, selon vous, y a t il un impact suivant les écritures Css (ci-dessous, "les sélecteurs sont importants") sur rapidité d'interprétation des règles Css par le navigateur ?
En extension cela donne : 
#id1, #id2, #id3,  #id4,  #id5,  #id5, {
  overflow: hidden;
}
#id1{ /* autres propriétés Css id1 */ }
#id2{ /* autres propriétés Css id2 */ }
#id3{ /* autres propriétés Css  id3*/ }
etc...

En inclusion cela donne : 
#id1{ overflow: hidden;  /* autres propriétés Css  id1 */ }
#id2{ overflow: hidden; /* autres propriétés Css  id2 */ }
#id3{ overflow: hidden; /* autres propriétés Css  id3 */ }
etc...

Modifié par aliasdmc (09 Dec 2017 - 15:27)
Salut,

je serais tenté de dire que la première version doit être plus rapide, car il y a moins de parse a effectuer par le navigateur.

Mais franchement je sais même pas si ça correspond à 1ms Smiley confus

Donc il vaut mieux écrire son code pour s'y retrouver soi-même
Modifié par taspeur (09 Dec 2017 - 17:57)
Bonjour taspeur,

Mais franchement je sais même pas si ça correspond à 1ms
Tu as peut être raison, j'arrive pas à trouver des infos. Ce qu'il faut imaginer c'est que là mon exemple est très basique, mais sur une "grosse" Css...
Si on arrive a grappiller du temps ou du processeur, surtout que avec Sass cela me coute rien ...

Donc il vaut mieux écrire son code pour s'y retrouver soi-même
C'est du code Css, généré par Sass donc j'ai pas trop de problème pour m' y retrouver, enfin pour le moment Smiley biggrin .

En fait, le but final de la question est de savoir si il faut que je prendre l’habitude de faire des inclusions de propriétés ou des extensions de propriétés dans Sass. Je vais continuer d'investigué ...
Bonjour,

J'ai fait deux tests avec la console de performance Chrome :
Voila le résultat :
Cas 1 :
=> fichier css généré de 1335ko = 232 ko gzip
=> Le temps moyen (20tests) de parse de la Css est de 147,4ms
#div1, #div2, etc.. 10000 fois{
  margin-left: 5px;
}
je simplifie car il y a en réalité, j'ai beaucoup plus de propriétés (positionnement et mise en forme)

Cas 2 :
=> fichier css généré de 2908ko = 93 ko gzip
=> Le temps moyen (20tests) de parse de la Css est de 279,1ms
#div1 {
  margin-left: 5px;
}
 #div2  {
  margin-left: 5px;
}
etc.. 10000 fois

Code HTML :
<div id="div1"></div><div id="div2"></div>etc.. 10000 fois

Donc, il semblerait qu'il y ai bien un impact, du moins sur chrome.
C'est intéressant aussi niveau de gzip, ce qui semble confirmer ce que dit l'article dont je me suis inspiré pour faire ce test
https://csswizardry.com/2016/02/mixins-better-for-performance/

J'ai lu hier la méthodologie BEM, très bien !
Modifié par aliasdmc (10 Dec 2017 - 16:40)
Ah ! cool que tu aies fait le test, j'avais la flemme ^^

Bon en effet c'est plus que 1ms Smiley lol
Donc autant que possible il faut regrouper les paramètres identiques
J'ai pas trop de d'avis pour le moment, j'essaye de trouver d'autres tests qui pourrait être plus explicites. Mais bon ! je ne vais pas non plus y passer des heures Smiley biggrin .

Je pense, il faut prendre l'ensemble, car si tu gagnes en parse de la Css, tu peux le perdre en
poids de "gzipage" en moment du transfère serveur vers navigateur.
Pour le moment, les gains sont supérieurs pour le "gzipage" que pour le parse Css.
Modifié par aliasdmc (10 Dec 2017 - 17:40)
salut, je rentre dans la discussion d'un domaine que je ne connais pas vraiment et je vois les résultats dont vous parlez.

Le gain de poids peut aussi se faire en minifiant le css Smiley cligne vu que c'est du sass on ne devrait jamais lire ou modifier le css généré du coup tu peux le minifier pour gagner du poids Smiley smile
Sujet clos
Aller à