Le contrôle du cache du navigateur

Bonjour à tous

Pour donner suite aux derniers messages de ce post, je voudrais revenir un peu sur le cache des navigateurs.

Le but étant qu'à chaque fois que l'on mets à jour un fichier sur le serveur, que l'on oblige le navigateur a télécharger et prendre en compte la mise à jour, car sinon il utiliserait son cache pour afficher la page et afficherait donc l'ancienne version .

HammeHetfield propose cette solution :

HammHetfield a écrit :
Encore plus simple : style.css?v=2 ça évite de changer le nom du fichier et le résultat est le même...

J'ai fais des recherches, mais je ne trouve rien de concluant afin de savoir comment cela fonctionne.

Que veut-dire exactement le ?v=2 ? Va-t-il être lu par le navigateur ?

Je me doute bien que le v=2 veut dire version 2, mais c'est surtout le ? qui m'intrigue.

D'après ce que je peux comprendre ici, http://translate.googleusercontent.com/translate_c?act=url&hl=fr&ie=UTF8&prev=_t&rurl=translate.google.ch&sl=en&tl=fr&u=http://stackoverflow.com/questions/3466989/what-does-appending-v-1-to-css-and-javascript-urls-in-link-and-script-tags-do&usg=ALkJrhjH_Ul4GVP3MMilElDUQUJWU1A5nw

Il s'agirait de javascript ?

Merci d'avance cligne
Modifié par marc.suisse (21 Nov 2011 - 13:11)

Bonjour,

Bon, c'est parti pour «le B.A.-ba du développement web».

Dans une URL, le symbole «?» introduit une chaine de requête (Query String). Dans le cas d'une requête HTTP GET, cela permet de fournir à un script CGI ou PHP un certain nombre de données, sous la forme nom=valeur.

Un exemple typique: http://example.org/chemin/mon-script.php?ma-variable=kikoo&une-autre=lol
Dans `mon-script.php` on pourra récupérer les données passées en paramètres GET en utilisant $_GET['ma-variable'] et $_GET['une-autre']. Avec d'autres langages il y aura d'autres fonctions ou syntaxes pour faire la même chose.

Une conséquence, c'est que script?var=x et script?var=y désignent très probablement des contenus différents. Donc lorsqu'on demande script?var=x, les navigateurs peuvent mettre en cache un contenu mais ils l'associent à l'URL complète (Query String comprise), pas à l'URL sans Query String.

Ce comportement des navigateurs est utilisé pour passer outre le cache du navigateur, en ajoutant un numéro de version (ou un timestamp ou autre marqueur) en Query String. Par exemple:
http://example.org/ui/scripts/slider.min.js?1321879682
http://example.org/ui/scripts/slider.min.js?1321879693
http://example.org/ui/scripts/slider.min.js?1321879701

En général on utilise cette technique en la combinant avec une gestion du cache qui dit au navigateur «garde ce contenu en cache très très longtemps». Par exemple on définit l'expiration du cache pour certains fichiers à aujourd'hui +1 an, et quand on publie une nouvelle version du fichier on incrémente le marqueur de version en Query String.

Bien entendu on ne modifie pas tous ces marqueurs à la main. On automatise ces aspects (que ça soit en PHP, Python ou autre langage utilisé pour le développement du site), et c'est un des points à prendre en compte dans la conception du site, de ses templates, d'un éventuel process de build, etc.

L'alternative, intéressante surtout pour des petits sites de communication où les visiteurs reviennent peu, c'est de zapper cette technique et de définir des dates d'expiration des ressources à quelques heures après la requête. C'est moins efficace, mais c'est un bon compromis si on veut un truc simple et que le type de site web s'y prête.

grillé par Florent

Cela n'a rien à voir avec JavaScript, c'est juste une variable envoyée au serveur en GET.

Si la feuille de styles CSS est statique (dans la plupart des cas) et n'est pas générée par un langage côté serveur (type PHP, etc), la variable sera juste ignorée.

Elle n'est là que pour indiquer au cache qu'il s'agit de charger une autre version du fichier.

Par contre, attention avec cette méthode, elle est certes souple mais n'est pas toujours efficacement prise en compte pour la gestion du cache par certains vieux navigateurs et par les proxies.

L'idéal est de donner directement un numéro de version dans le nom du fichier, du type styles2011-11-21.css
Modifié par dew (21 Nov 2011 - 14:01)

Hello,

fvsch a écrit :
L'alternative, intéressante surtout pour des petits sites de communication où les visiteurs reviennent peu, c'est de zapper cette technique et de définir des dates d'expiration des ressources à quelques heures après la requête. C'est moins efficace, mais c'est un bon compromis si on veut un truc simple et que le type de site web s'y prête.

Et on peut compléter avec un ETag.

Salut et merci d'avoir pris le temps d'écrire cette explication et de me rappeller «le B.A.-ba du développement web», j'en ai bien besoin

fvsch a écrit :
Bonjour,

Bon, c'est parti pour «le B.A.-ba du développement web».

Dans une URL, le symbole «?» introduit une chaine de requête (Query String). Dans le cas d'une requête HTTP GET, cela permet de fournir à un script CGI ou PHP un certain nombre de données, sous la forme nom=valeur.

Un exemple typique: http://example.org/chemin/mon-script.php?ma-variable=kikoo&une-autre=lol
Dans `mon-script.php` on pourra récupérer les données passées en paramètres GET en utilisant $_GET['ma-variable'] et $_GET['une-autre']. Avec d'autres langages il y aura d'autres fonctions ou syntaxes pour faire la même chose.

Jusque là, pas de problème, j'ai déjà lu cette manière de faire dans un livre et j'utilise d'ailleurs l'autre "façon" ( Post) dans l'envoi du formulaire du site web dont je m'occupe.

fvsch a écrit :
Une conséquence, c'est que script?var=x et script?var=y désignent très probablement des contenus différents. Donc lorsqu'on demande script?var=x, les navigateurs peuvent mettre en cache un contenu mais ils l'associent à l'URL complète (Query String comprise), pas à l'URL sans Query String.

Ce comportement des navigateurs est utilisé pour passer outre le cache du navigateur, en ajoutant un numéro de version (ou un timestamp ou autre marqueur) en Query String. Par exemple:
http://example.org/ui/scripts/slider.min.js?1321879682
http://example.org/ui/scripts/slider.min.js?1321879693
http://example.org/ui/scripts/slider.min.js?1321879701

Là par contre j'ai un tout petit plus de peine à comprendre, si je prends le premier exemple, slider.min.js?1321879682.

Au chargement de la page, le navigateur va "voir" qu'il faut charger également un script javascript ( mais cela pourrait être un fichier .css j'imagine ? ) et va donc demander au serveur de le lui fournir.

Comme le nom a changé, il va partir dans l'idée que c'est un nouveau fichier ( et il a raison ) et va le charger alors que si le nom était resté comme avant, il ( le navigateur ) aurait utilisé le fichier qu'il avait gardé en cache.

Mais le serveur en lui-même ne va pas prendre en compte la requête GET?1321879682 et il va l'ignorer, c'est donc uniquement pour gruger le navigateur ?

Ou je patauge dans la semoule de blé dur ?..

fvsch a écrit :
L'alternative, intéressante surtout pour des petits sites de communication où les visiteurs reviennent peu, c'est de zapper cette technique et de définir des dates d'expiration des ressources à quelques heures après la requête. C'est moins efficace, mais c'est un bon compromis si on veut un truc simple et que le type de site web s'y prête.

Si je comprends bien, cette méthode n'est conseillée que sur de petits sites de moindre importance sans grand trafic car le chargement à chaque fois des fichiers du site n'est pas trop pénalisant pour le serveur et pour les "clients".

Alors qu'un site ayant beaucoup de visiteurs ne peut pas se permettre d'imposer aux visiteurs de recharger à chaque fois les fichiers du site ( ce qui ralentirait le temps de chargement du site ) tant que les fichiers ne sont pas modifiés .

dew a écrit :
Cela n'a rien à voir avec JavaScript, c'est juste une variable envoyée au serveur en GET.

Si la feuille de styles CSS est statique (dans la plupart des cas) et n'est pas générée par un langage côté serveur (type PHP, etc), la variable sera juste ignorée.

Elle n'est là que pour indiquer au cache qu'il s'agit de charger une autre version du fichier.

Par contre, attention avec cette méthode, elle est certes souple mais n'est pas toujours efficacement prise en compte pour la gestion du cache par certains vieux navigateurs et par les proxies.

L'idéal est de donner directement un numéro de version dans le nom du fichier, du type styles2011-11-21.css

Salut et merci aussi pour ta réponse

Mais dans ce cas là, il faut modifier chaque page HTML du site qui demande ce fichier CSS ?

Pour contrecarrer ce point négatif, j'ai cru lire que l'on pouvait utiliser La règle @import pour ne modifier qu'une seule fois le nom du fichier.

Il faut d'ailleurs que je fasse des recherches afin de bien comprendre comment cela fonctionne.

Est-ce un peu similaire à de l'include en PHP ?

Julien Royer a écrit :
Et on peut compléter avec un ETag. smile

Je suis en train de faire des recherches sur ce qu'est ETag exactement.

Merci encore !

marc.suisse a écrit :

Mais dans ce cas là, il faut modifier chaque page HTML du site qui demande ce fichier CSS ?

Si tu dois faire ça il faut revoir la conception de ton site.

Salut

Dans mon idée, je voyais ça de cette manière...

Si je prends exemple du site dont il était question au bar ces derniers jours, celui-ci

Sur chaque page du site, j'ai la ligne CSS suivante, donc pour charger les styles de la page.

<link rel="stylesheet" media="screen" type="text/css" title="style" href="index.css" />

Donc si je modifie le nom du fichier index.css par un autre, typiquement par exemple index21-11-2011.css, je suis obligé de changer ce nom dans chaque page HTML qui pointe vers ce fichier non ?

Oui. C'est pour ça qu'on utilise (au minimum) des includes en PHP pour les parties communes des pages. Pour ton exemple, vu que le site est déjà fait, il te suffit de faire un chercher/remplacer sur l'ensemble des fichiers HTML de ton site. Je pense que tous les éditeurs de textes modernes permettent de faire ça.

Salut

Merci de la précision !

Je savais que l'on pouvait utiliser les includes pour parties communes tel que le header ou le footer, mais je ne savais pas pour la ligne du CSS dans le head...

Bonjour à tous

J'ai fais mention dans un message précédent de la possibilité d'utiliser la règle @import mais en faisant des recherches, je suis tombé sur cette news

Donc en gros, dew nous déconseille d'utiliser cette règle.

Bon je pense que l'astuce est valable sur de gros sites et que si on l'utilise pour pouvoir modifier facilement un fichier CSS ( sans devoir passer sur chaque page pour modifier le nom du CSS ) afin que le cache des navigateurs puisse en tenir compte, ce n'est pas trop grave.

Je ne me suis pas encore plongé par contre sur le fonctionnement proprement dit, je considère pour l'instant qu'il s'agit d'une sorte "d'include"...

Si je résume un peu, on peut utiliser une chaîne de requête query string comme nous l'explique Florent ( j'attends juste d'avoir sa confirmation afin de savoir si j'ai bien compris l'astuce ).

Par contre, elle ne fonctionnerait pas bien avec certains anciens navigateurs ( mais anciens comment ? ) et par les proxies

Ou alors de modifier le nom du fichier CSS afin que le navigateur se rende compte que c'est une nouvelle version et qu'il lui faut l'utiliser et non pas utiliser la version qu'il a dans son cache.

Mais pour ça, il faut modifier le nom du fichier .CSS dans chaque page HTML qui le demande, sauf si on utilise des includes qui permettent de modifier qu'une seule fois le nom du fichier CSS demandé.

Suite au prochain épisode sur ce sujet très intéressant.
Modifié par marc.suisse (23 Nov 2011 - 13:27)

Bonjour à tous

Florent, si tu passes par là et que évidemment tu as 5 minutes, je serais curieux de savoir si j'ai bien compris le principe, merci d'avance

Tu devrais créer un nouveau sujet pour ça.

Es-tu sûr, car cela fais partie du fonctionnement du cache ..

Quel est l'avis d'un modérateur ?

Bonne soirée à tous

marc.suisse a écrit :
Es-tu sûr, car cela fais partie du fonctionnement du cache ..

Quel est l'avis d'un modérateur ?

Non ça n'a rien à voir avec le cache.

Et je te rassure tu peux aussi faire confiance aux membres du forum (sauf jmlapam ) et pas qu'aux modérateurs.
Modifié par jb_gfx (27 Nov 2011 - 22:19)

Je ne voulais pas te froisser, j'aime bien par contre avoir plusieurs avis

Et selon toi, dans quelle catégorie et sous quel nom dois-je ouvrir un nouveau sujet ?

Car c'était cette partie là que n'est pas tout à fais claire pour moi

a écrit :
fvsch a écrit :
Une conséquence, c'est que script?var=x et script?var=y désignent très probablement des contenus différents. Donc lorsqu'on demande script?var=x, les navigateurs peuvent mettre en cache un contenu mais ils l'associent à l'URL complète (Query String comprise), pas à l'URL sans Query String.

Ce comportement des navigateurs est utilisé pour passer outre le cache du navigateur, en ajoutant un numéro de version (ou un timestamp ou autre marqueur) en Query String. Par exemple:
http://example.org/ui/scripts/slider.min.js?1321879682
http://example.org/ui/scripts/slider.min.js?1321879693
http://example.org/ui/scripts/slider.min.js?1321879701

----------------------------------------------------------

Là par contre j'ai un tout petit plus de peine à comprendre, si je prends le premier exemple, slider.min.js?1321879682.

Au chargement de la page, le navigateur va "voir" qu'il faut charger également un script javascript ( mais cela pourrait être un fichier .css j'imagine ? ) et va donc demander au serveur de le lui fournir.

Comme le nom a changé, il va partir dans l'idée que c'est un nouveau fichier ( et il a raison ) et va le charger alors que si le nom était resté comme avant, il ( le navigateur ) aurait utilisé le fichier qu'il avait gardé en cache.

Mais le serveur en lui-même ne va pas prendre en compte la requête GET?1321879682 et il va l'ignorer, c'est donc uniquement pour gruger le navigateur ?

Ou je patauge dans la semoule de blé dur ?..

Merci à toi d'être toujours là pour aider !

Ah je vois. En fait si je donnes un exemple concret ça sera peut être plus simple :

J'ai une page articles.php qui affiche ma liste d'articles.

Si j'appelle articles.php?page=1 je demande la première page, ensuite articles.php?page=2, la deuxième et ainsi de suite.

Le navigateur va mettre en cache chaque "page" indifféremment l'une de l'autre (on considère que le dev à bien fait son boulot évidemment). Et c'est logique puisque ce sont en faire des pages différentes, bien qu'elles utilisent le même fichier de base articles.php.

Ce script php lui va pouvoir traiter la variable $_GET['page'] et faire les traitements qu'il veut avec. Mais le navigateur s'en fiche, il ne sait pas ce que le script fait. Il sait juste que "page" à changé dans l'URL et donc il considère que c'est une page différente.

Après si tu appliques ça un autre type de fichier : CSS, HTML ou ce que tu veux, le comportement du navigateur reste le même. Il sait que l'URL change et donc il demande a télécharger une nouvelle copie du fichier. Quand on dit que la variable GET est ignoré dans ce cas, c'est simplement que du fait que ce soit un fichier CSS ou HTML tu ne peux pas la traiter dans le fichier elle même. Mais pour le navigateur ça ne change rien, l'URL change il demande une nouvelle version du fichier.

Par contre le problème que j'ai rencontré avec cette méthode c'est que sous certaines configurations, sous IE (6 à 8), parfois ça ne fonctionne pas et le fichier n'est pas mis à jour. Bon évidemment c'est sur le PC du client (le client boulet, pas le client HTTP). Donc pour éviter ce genre de désagrément je préférés utiliser un nom de ficher avec un numéro de version (fichier_1.0.js), là je suis sur que la nouvelle version sera prise en compte en changeant le nom du fichier. Et puis ça permet également de garder un historique des versions (pour petits projets c'est pratique), pour les projets plus costauds il vaut mieux compter sur des outils de versionning.

Salut, merci de l'explication

Alors c'est bien ce que j'avais compris, le navigateur va bien "voir" la variable à la fin du nom du fichier et va considérer que le fichier est nouveau et qu'il lui faut donc le remplacer dans son cache.

Par contre cela n'ira pas plus loin, car il ne va tenir compte plus que ça de la variable.

Une autre question qui vient par contre concernant l'astuce du numéro de version, tu disais que l'on devait utiliser une include PHP pour éviter de devoir modifier le nom du fichier CSS demandé dans chaque page HTML.

Dans la pratique je verrais ça de cette manière :

<link rel="stylesheet" media="screen" type="text/css" title="style" href="<?php include("style.css"); ?>" />

Si c'est bien comme ça que l'on doit coder la chose, quand le navigateur va arriver sur cette ligne, va-t-il charger à chaque fois l'include ?

Car son nom restera la même, tu vois ce que je veux dire ?

Merci encore et bonne journée !

PS : C'est quoi les outils de versionning ?
Modifié par marc.suisse (28 Nov 2011 - 08:18)

Bonjour,

Non, ce n'est pas comme ça que tu dois faire. La ligne complète qui appelle le fichier CSS doit être dans l'include.

appelCSS.php

<link rel="stylesheet" media="screen" type="text/css" href="stylesV3.css" />

page html

<head>
...
<?php include("appelCSS.php"); ?>
...
</head>

Il faudra seulement porter attention au chemin vers le fichier CSS, selon le niveau du fichier HTML dans lequel est inséré l'include.

Je t'invite à lire un article sur l'include.
Modifié par Tony Monast (28 Nov 2011 - 13:54)

Pour le numéro de version directement dans le fichier tu peux utiliser une règle de réécriture (ça avait été dit dans un autre sujet il me semble), ainsi tu n'a besoin de modifier que ton fichier header.php, et tu gardes toujours le même nom pour ton fichier CSS.

La règle :

RewriteRule ^ma-feuille-de-styles-v[0-9\.]+.css$ css/ma-feuille-de-styles.css

Maintenant quand tu appelles ma-feuille-de-styles-v1.0.css ou ma-feuille-de-styles-v1.1.css le serveur chargera ma-feuille-de-styles.css quoi qu'il arrive.

Pour les outils de versioning : http://fr.wikipedia.org/wiki/Gestion_de_versions

Tony Monast a écrit :
Bonjour,

Non, ce n'est pas comme ça que tu dois faire. La ligne complète qui appelle le fichier CSS doit être dans l'include.

appelCSS.php

<link rel="stylesheet" media="screen" type="text/css" href="stylesV3.css" />

page html

<head>
...
<?php include("appelCSS.php"); ?>
...
</head>

Il faudra seulement porter attention au chemin vers le fichier CSS, selon le niveau du fichier HTML dans lequel est inséré l'include.

Je t'invite à lire un article sur l'include.

Salut Tony, merci de cette précision

Je comprends mieux maintenant.

En ce qui concerne le chemin, je pense ( après avoir lu l'article proposé ) qu'il est préférable de le mettre en absolu par rapport à la racine du site.

Mais je pensais encore à une petite chose, si on fais comme ça et que l'on modifie le fichier CSS, il faut aussi modifier la page PHP dans laquelle l'include est placée.

Je m'explique :

Quand on arrive sur la page index.php ( supposons qu'elle s'appelle comme ça ), la page va donc se charger avec la ligne CSS que le serveur aura placé dans le head du document.

Le navigateur aura donc cette page en cache et ne la rechargera pas tant que cette dernière n'aura pas changé en structure et surtout pas changé de nom.

Donc si on modifie le fichier CSS, le navigateur n'en tiendra pas compte tant que la page index.php n'aura pas changé.

Ou bien j'ai zappé un point ? ( Il est encore tôt.. )

"jb_gfx" a écrit :
Pour le numéro de version directement dans le fichier tu peux utiliser une règle de réécriture (ça avait été dit dans un autre sujet il me semble), ainsi tu n'a besoin de modifier que ton fichier header.php, et tu gardes toujours le même nom pour ton fichier CSS.

La règle :

RewriteRule ^ma-feuille-de-styles-v[0-9\.]+.css$ css/ma-feuille-de-styles.css

Maintenant quand tu appelles ma-feuille-de-styles-v1.0.css ou ma-feuille-de-styles-v1.1.css le serveur chargera ma-feuille-de-styles.css quoi qu'il arrive.

J'ai un tout petit peu de peine à comprendre, mais après relecture, je me demande si cela ne permets de pas résoudre le problème que je viens de citer..

RewriteRule si je comprends bien est une regex qui remplace certains caractères.

Je vais encore réexaminer ça ..

Merci en tout cas !!

Si un modérateur pouvait svp effacer le message précédent, j'ai fais une petite erreur dont je m'en suis rendu compte après coup, merci d'avance !
Modifié par marc.suisse (29 Nov 2011 - 12:46)