Page 1 sur 2
Recherche un article : simple/multiple utilisation de <li
Posté : 08 avr. 2008, 10:56
par ouckileou
Bonjour,
une fois j'ai lu un article disant que l'utilisation de 3 balises <link>, une par feuille de style utilisée, était (beaucoup) plus lent que une seule, appelant les 3 feuilles de styles.
En gros, ceci :
Code : Tout sélectionner
<link rel="StyleSheet" type="text/css" href="liste1.css" />
<link rel="StyleSheet" type="text/css" href="liste2.css" />
<link rel="StyleSheet" type="text/css" href="liste3.css" />
est plus lent que cela :
Code : Tout sélectionner
<link rel="StyleSheet" type="text/css" href="liste1.css; liste2.css; liste3.css" />
Je ne le retrouve pas, est-ce que ça parle à quelqu'un ?
Impossible de retrouver des infos à ce sujet, si vous avez ça dans vos bookmarks...
Merci !
Posté : 08 avr. 2008, 11:06
par Berzemus
rien vu la dessus.. par contre, ce qui va plus vite encore, c'est de minimiser les appels vers le serveur.
J'utilise un script qui me concatène tous mes css (quand y'en a plus de 3) à la suite l'un de l'autre, me les compresse, et envoie le tout en une fois. Même chôse pour le JS.
Posté : 08 avr. 2008, 11:09
par zeus
J'ai eu l'occasion d'en parler lors de la conférence AFUP à Lyon de la semaine dernière, et la solution proposée par Berzemus a un énorme inconvénient : le cache.
Le script qui génère un énorme fichier CSS est viable uniquement si tu envois tout le temps tout les fichiers CSS de ton script.
Dans les autres cas, tu va te retrouver à envoyer plusieurs fois le contenu de mêmes fichiers, ce qui n'aurait pas été fait avec une gestion de la durée de cache appropriée.
Re: Recherche un article : simple/multiple utilisation de &l
Posté : 08 avr. 2008, 11:15
par Hubert Roksor
une seule, appelant les 3 feuilles de styles.
Whaaaa? On peut faire ça, mettre plusieurs URI séparés par des points-virgules ?
Sinon, d'un point de vue technique je ne vois pas de raison d'être moins performant (à une ridicule marge près) et je n'en ai jamais entendu parlé.
Concernant le détournement de sujet sur la mise en cache des machins, si cette solution passe par PHP je m'attendrais à ce que l'overhead induit par PHP (comparé à un ou plusieurs fichiers statiques) oblitère tout gain de performance.
Re: Recherche un article : simple/multiple utilisation de &a
Posté : 08 avr. 2008, 11:29
par ouckileou
une seule, appelant les 3 feuilles de styles.
Whaaaa? On peut faire ça, mettre plusieurs URI séparés par des points-virgules ?
Je ne suis pas sûr de la syntaxe, j'ai mis au pif
Sinon, d'un point de vue technique je ne vois pas de raison d'être moins performant (à une ridicule marge près) et je n'en ai jamais entendu parlé.
Je suis quouasiment sûr que nous avons à faire... d'avoir vu cet article un jour ![/quote]
Posté : 08 avr. 2008, 11:31
par Berzemus
J'ai eu l'occasion d'en parler lors de la conférence AFUP à Lyon de la semaine dernière, et la solution proposée par Berzemus a un énorme inconvénient : le cache.
Le script qui génère un énorme fichier CSS est viable uniquement si tu envois tout le temps tout les fichiers CSS de ton script.
Dans les autres cas, tu va te retrouver à envoyer plusieurs fois le contenu de mêmes fichiers, ce qui n'aurait pas été fait avec une gestion de la durée de cache appropriée.
Ah, mais c'est que je n'ais pas tout dit ^-^
Le script prend en paramètre les fichiers css à inclure .. ainsi il me sert pour les styles de base, d'impression, et tout ça.. Du coup, tout les css standards pour le média "screen" ont un seul titre (puisque ne forment qu'une seule page), et sont facilement gérables sous JS.
Posté : 08 avr. 2008, 11:50
par zeus
C'est dommage qu'on soit HS parce que le sujet m'intéresse
berzem 
Posté : 08 avr. 2008, 11:54
par ouckileou
C'est dommage qu'on soit HS parce que le sujet m'intéresse
berzem
Bah faitesz vous plaisir, tant qu'on oublie pas mon article !
Posté : 08 avr. 2008, 12:02
par Hywan
Apparement,
la syntaxe que ouckileou propose n'est pas valide. Mais il serait évident qu'un appel au serveur soit plus rapide que trois appels au serveur.
Une question cependant. Est-ce que c'est plus rapide d'utiliser les importations (@import) de CSS que de faire différent lien (<link />) en HTML ? Ça, ça m'a toujours embêter et j'ai jamais pris le temps de m'y attacher. Il n'y a que
cet article d'Alsacréations mais ça ne répond pas vraiment à ma question.
Parce que dans ce cas, on utilise un seul lien (via <link />) et le reste se fait via l'importation (@import). Pour la première mise en cache, ce sera donc plus rapide, et par la suite, la lecture se fera dans le cache, donc pas de soucis.
Je précise néanmoins que quand je dis qu'on utilise un seul lien, c'est pour un média donné (car IE gère mal les groupes de médias dans les feuilles CSS ...).
Posté : 08 avr. 2008, 12:09
par Hubert Roksor
Pour @import ça devrait être systématiquement plus lent, et tout ce que j'ai pu lire allait dans ce sens. Notamment, ça empêche le navigateur de paralléliser les transferts puisqu'il ne découvre l'URI qu'après avoir parsé le fichier.
Un lien qui va bien avec le sujet :
http://developer.yahoo.com/performance/
Posté : 08 avr. 2008, 12:35
par Berzemus
Pour @import ça devrait être systématiquement plus lent, et tout ce que j'ai pu lire allait dans ce sens. Notamment, ça empêche le navigateur de paralléliser les transferts puisqu'il ne découvre l'URI qu'après avoir parsé le fichier.
Un lien qui va bien avec le sujet :
http://developer.yahoo.com/performance/
Ouaip, je suis tombé plusieurs fois sur le même sujet..
le chargement se fait le plus rapide par <link> dans la partie <head>.
Posté : 08 avr. 2008, 14:09
par Sékiltoyai
Sinon j'ai une solution encore plus rapide, elle explose tous les bench :
Bah ouais, on utilise pas de css
Plus sérieusement, pour la solution de Berzemus, en effet, il y a moyen que ce soit la plus rapide. Pour le cache, on règle correctement les cache avec les headers, et on adopte une nomenclature bijective (à chaque combinaison de css correspond un et un seul nom). Ainsi, si on veut concaténer fichier1.css, fichier2.css et fichier3.css, on demande par exemple fichier1_fichier_2_fichier3.css, et derrière, un .htaccess rewrite l'url vers un script.
Posté : 08 avr. 2008, 14:11
par Victor BRITO
Sinon j'ai une solution encore plus rapide, elle explose tous les bench :
Bah ouais, on utilise pas de css
Une solution à adopter demain.
Posté : 08 avr. 2008, 15:17
par mere-teresa
<!--
Relationship values can be used in principle:
a) for document specific toolbars/menus when used
with the link element in document head e.g.
start, contents, previous, next, index, end, help
b) to link to a separate style sheet (rel="stylesheet")
c) to make a link to a script (rel="script")
d) by stylesheets to control how collections of
html nodes are rendered into printed documents
e) to make a link to a printable version of this document
e.g. a PostScript or PDF version (rel="alternate" media="print")
-->
<!ELEMENT link EMPTY>
<!ATTLIST link
%attrs;
charset %Charset; #IMPLIED
href %URI; #IMPLIED
hreflang %LanguageCode; #IMPLIED
type %ContentType; #IMPLIED
rel %LinkTypes; #IMPLIED
rev %LinkTypes; #IMPLIED
media %MediaDesc; #IMPLIED
>
Re: Recherche un article : simple/multiple utilisation de &l
Posté : 08 avr. 2008, 22:32
par Victor BRITO
En gros, ceci :
Code : Tout sélectionner
<link rel="StyleSheet" type="text/css" href="liste1.css" />
<link rel="StyleSheet" type="text/css" href="liste2.css" />
<link rel="StyleSheet" type="text/css" href="liste3.css" />
est plus lent que cela :
Code : Tout sélectionner
<link rel="StyleSheet" type="text/css" href="liste1.css; liste2.css; liste3.css" />
Et ceci ?
Code : Tout sélectionner
<style type="text/css">
@import "liste1.css";
@import "liste2.css";
@import "liste3.css";
</style>