web-dev-qa-db-fra.com

Comment faire en sorte que les navigateurs ne téléchargent que CSS / Javascript lorsqu'il change?

J'ai eu une épiphanie plus tôt lors de la lecture de codinghorror. Sur un site Web de contenu (blog/forum/site Web), les choses de base changent rarement, voire pas du tout. Alors je me demandais s'il y avait un moyen de les mettre en cache et de les télécharger à nouveau si quelque chose change?

Je suppose qu'il y a deux questions ici:

  1. Les navigateurs cachent-ils CSS/Javascript? Si oui, combien de temps puis-je changer combien de temps?
  2. Dois-je écrire un programme Javascript simple qui vérifie si le fichier CSS/JS a changé et le télécharger si nécessaire ou existe-t-il un cadre qui le gère?
cssjavascriptcache
2
xyious

Vous pouvez utiliser votre fichier .htaccess pour y parvenir. FYI C'est exactement ce que les programmes comme YSlow! et Google Page Speed ​​vous conseille de le faire quand il est question de définir des dates d'expiration très éloignées pour les supports statiques.

J'utilise le code suivant, qui définit la date d'expiration du cache sur 2099, supprime les balises d'entité et active gzip. Googler pour ce genre de choses vous donnera toutes sortes d’autres moyens de parvenir au même résultat et je suis certain que la plupart des webmasters ont leur propre moyen préféré de le faire.

Copiez/collez le code dans votre fichier .htaccess et téléchargez-le.

#####################################################
# CONFIGURE media caching
#
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|ico|js|css|swf)(\.gz)?$">
Header set Expires "Thu, 15 Apr 2099 20:00:00 GMT"
Header unset ETag
FileETag None
</FilesMatch>

<IfModule mod_deflate.c>
<FilesMatch "\.(js|css|php|html)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>
#
#####################################################
2
toomanyairmiles

Oui, les navigateurs mettent en cache CSS et JavaScript. Toomanyairmiles vous a déjà montré un moyen de définir la durée de vie en cache des fichiers CSS/JS dans un fichier Apache .htaccess; une autre façon de le faire est d'utiliser mod_expires :

ExpiresActive On
ExpiresByType text/javascript "access plus 1 week"
ExpiresByType text/css "access plus 1 week"

Cela indique aux navigateurs de mettre en cache tous les fichiers CSS/JS pendant une semaine au maximum. Cette durée est suffisamment longue pour limiter au minimum les demandes de tels fichiers, mais suffisamment courte pour que vous n'ayez pas à vous soucier du fait que le navigateur de quelqu'un conserve une ancienne feuille de style. l'année dernière dans sa cache.

(Bien entendu, cela ne fonctionne que si votre serveur utilise les types MIME corrects pour ces fichiers, mais si ce n’est pas le cas, c’est un problème que vous devriez quand même résoudre.)

Maintenant que vous avez défini une durée de vie de cache longue pour vos fichiers statiques, le prochain problème que vous rencontrerez est de les actualiser rapidement lorsque vous les modifiez (comme vous le ferez sûrement à terme). Une solution courante consiste à ajouter aux URL une chaîne de requête fictive contenant un numéro de révision, comme suit:

<link rel="stylesheet" type="text/css" href="/static/style.css?v001" />

Le serveur ignorera la chaîne de requête (car l'URL pointe vers un fichier statique), mais le navigateur la traitera comme faisant partie de l'URL. Ainsi, après avoir mis à jour la feuille de style, il vous suffit de changer le numéro de version pour que les navigateurs chargent la nouvelle feuille de style au lieu de l’ancien. (Si vous voulez vraiment avoir du style, vous pouvez utiliser un script pour générer le numéro de version automatiquement en fonction du dernier horodatage de modification du fichier.)

En fait, le logiciel StackExchange sur ce site utilise quelque chose qui ressemble beaucoup à cette astuce. Si vous regardez la source de cette page, vous verrez que l'URL principale de la feuille de style ressemble à ceci:

http://cdn.sstatic.net/webmasters/all.css?v=e42c8b75839a

Ici, le ?v=e42c8b75839a est vraisemblablement un identifiant de version qui change chaque fois que la feuille de style est mise à jour. En regardant les en-têtes HTTP, par exemple Dans Firebug, vous pouvez également voir que la feuille de style a une durée de vie de cache d’une semaine (max-age=604800) comme je l’ai suggéré ci-dessus.

6
Ilmari Karonen