PHPfrance

la communauté d'entraide francophone dédiée au PHP

Recherche un article : simple/multiple utilisation de <link>

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : Recherche un article : simple/multiple utilisation de <link>

par Hubert Roksor » 08 avr. 2008, 22:36

Je ne pourrais pas le jurer, mais je pense que @import bloque l'évaluation du CSS pendant le téléchargement. Autrement dit, ça charge les trucs un par un (télécharge, évalue, télécharge, évalue) au lieu de tout télécharger en même temps et/ou dans le désordre.

Re: Recherche un article : simple/multiple utilisation de &l

par Victor BRITO » 08 avr. 2008, 22:32

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>
;)

par mere-teresa » 08 avr. 2008, 15:17

<!--
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
>

par Victor BRITO » 08 avr. 2008, 14:11

Sinon j'ai une solution encore plus rapide, elle explose tous les bench :

Code : Tout sélectionner

Bah ouais, on utilise pas de css :P :mrgreen:
Une solution à adopter demain. ;)

par Sékiltoyai » 08 avr. 2008, 14:09

Sinon j'ai une solution encore plus rapide, elle explose tous les bench :

Code : Tout sélectionner

Bah ouais, on utilise pas de css :P :mrgreen:

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.

par Berzemus » 08 avr. 2008, 12:35

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>.

par Hubert Roksor » 08 avr. 2008, 12:09

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/

par Hywan » 08 avr. 2008, 12:02

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 ...).

par ouckileou » 08 avr. 2008, 11:54

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 ! :-)

par zeus » 08 avr. 2008, 11:50

C'est dommage qu'on soit HS parce que le sujet m'intéresse berzem ;)

par Berzemus » 08 avr. 2008, 11:31

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.

Re: Recherche un article : simple/multiple utilisation de &a

par ouckileou » 08 avr. 2008, 11:29

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 :oops:
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]

Re: Recherche un article : simple/multiple utilisation de &l

par Hubert Roksor » 08 avr. 2008, 11:15

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.

par zeus » 08 avr. 2008, 11:09

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.

par Berzemus » 08 avr. 2008, 11:06

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.