Aider agressifs JavaScript de mise en cache

Question

J'ai couru dans un problème où je apporter des modifications à un peu de JavaScript fichiers qui sont référencés dans un fichier HTML, mais le navigateur ne peut pas voir les changements.Il détient sur la copie mise en cache dans le navigateur, même si le serveur web a une version plus récente.

Pas jusqu'à ce que je force le navigateur pour effacer le cache puis-je voir les changements.

Est-ce un web-configuration du serveur?Dois-je créer mes fichiers JavaScript afin de ne jamais cache?J'ai vu quelques techniques intéressantes dans le Google Web Toolkit où elles créent un nouveau JavaScript nom de fichier à chaque fois qu'une mise à jour est faite.Je crois que c'est pour empêcher les procurations et les navigateurs de conserver les anciennes versions des fichiers JavaScript, avec les mêmes noms.

S'il existe une liste de pratiques exemplaires quelque part?

Answer 1

Nous avons ajouter un produit numéro de version à la fin de tous les Javascript et CSS, etc.) comme suit:

<script src="MyScript.js?4.0.8243">

Navigateurs ignorent tout ce qui est après le point d'interrogation, mais les mises à jour de provoquer une nouvelle URL, ce qui signifie cache-reload.

Cela a l'avantage supplémentaire que vous pouvez définir des en-têtes HTTP qui signifie "ne jamais cache!"

Answer 2

Il détient sur la copie mise en cache dans le navigateur, même si le serveur web a une version plus récente.

C'est probablement parce que le HTTP Expire / Cache-têtes de Contrôle sont définies.

http://developer.yahoo.com/performance/rules.html#expires

J'ai écrit à ce sujet ici:

http://www.codinghorror.com/blog/archives/000932.html

Ce n'est pas de mauvais conseils, en soi, mais il peut causer d'énormes problèmes si vous vous trompez.Dans Microsoft IIS, par exemple, l'en-tête Expires est toujours désactivée par défaut, probablement pour cette raison.Par la fixation d'un en-tête d'Expiration sur les ressources HTTP, vous dites que le client ne jamais vérifier les nouvelles versions de cette ressource - au moins pas jusqu'à ce que la date d'expiration figurant sur l'en-tête Expires. Quand je dis jamais, je veux dire, le navigateur ne sera même pas demandez une nouvelle version;il va tout simplement assumer sa version mise en cache est bon pour aller jusqu'à ce que le client efface le cache, ou le cache atteint la date d'expiration. Yahoo notes qu'ils changent le nom de fichier de ces ressources quand ils en ont besoin actualisé.

Tout ce que vous êtes vraiment sauver ici est le coût de la client d'interroger le serveur pour une nouvelle version et l'obtention d'un " 304 not modified-tête arrière dans le cas courant que la ressource n'a pas changé.Ce n'est pas beaucoup de frais généraux..sauf si vous êtes Yahoo.Bien sûr, si vous avez un ensemble d'images, ou des scripts qui ne changent presque jamais, certainement exploiter la mise en cache du client et allumez-la-tête Cache-Control.La mise en cache est essentielle pour les performances du navigateur;chaque développeur web doit avoir une compréhension profonde de la façon dont la mise en cache HTTP œuvres.Mais seulement l'utiliser dans un chirurgicaux, de façon limitée pour ces dossiers ou fichiers qui peuvent en bénéficier.Pour le reste, les risques l'emportent sur les avantages.Ce n'est certainement pas quelque chose que vous voulez allumé comme une couverture par défaut pour l'ensemble de votre site web..sauf si vous voulez changer les noms de fichiers chaque fois que le contenu.

Answer 3

@Jason et Darren

IE6 traite quoi que ce soit avec une chaîne de requête, comme cache.Vous devez trouver un autre moyen pour obtenir le numéro de version dans l'url, comme un faux répertoire:

<script src="/js/version/MyScript.js"/>

et tout simplement supprimer ce premier niveau de répertoire après js côté serveur avant de remplir la demande.

EDIT:Désolé à tous;il est Calmar, pas IE6, qui ne cache avec une chaîne de requête.Plus d'infos ici.

Answer 4

J'ai écrit un billet de blog à propos de la façon dont nous avons surmonté ce problème ici:

Éviter le JavaScript et les CSS feuille de style de la mise en Cache des Problèmes dans ASP.NET

Fondamentalement, au cours du développement, vous pouvez ajouter un nombre aléatoire à une chaîne de requête après le nom de fichier de votre fichier CSS.Lorsque vous faites une version validée, les commutateurs de code à l'aide de votre assemblée du numéro de la révision à la place.Cela signifie que dans votre environnement de production, vos clients peuvent cache la feuille de style, mais à chaque fois que la sortie d'une nouvelle version du site, ils seront obligés de le re-charger le fichier.

Answer 5

Je suis également de la méthode de la juste renommer les choses.Il ne manque jamais, et il est assez facile à faire.

Answer 6

est votre serveur pour envoyer les bons en-têtes de dire au navigateur, il a une nouvelle version?J'ai aussi ajouté de la date de la querystring avant.ie myscripts.js?date=4/14/2008 12:45:03 (seule la date serait codé)

Answer 7

@Darren Le problème de mise en cache a eu lieu sur IIS 6 et Apache 2 out-of-the-box.Je ne sais pas si la bonne résolution est de modifier les en-têtes de réponse HTTP, mais au lieu de prendre le changement de nom de l'itinéraire décrit dans quelques-uns des réponses ici.

@Chris Bon conseil.Je pensais que la chaîne de requête de l'approche est bonne, mais il sonne comme un fichier unique ou un nom de répertoire qui est nécessaire pour couvrir tous les cas.

Answer 8

Avec chaque nouvelle version, nous avons simplement ajouter un de plus en plus monotone entier le chemin d'accès racine de tous nos statique actifs, ce qui oblige le client à recharger (nous l'avons vu dans la chaîne de requête méthode de briser dans IE6 avant).Par exemple:

• Version 1:http://www.foo.com/1/js/foo.js
• Version 2:http://www.foo.com/2/js/foo.js

Il nécessite rejiggering des liens avec chaque version, mais nous avons intégré des fonctionnalités pour modifier automatiquement les liens dans nos outils de déploiement.

Une fois que vous faites cela, vous pouvez utiliser Expire/-tête Cache-Control que de laisser le cache du client JS ressources "pour toujours", car le chemin change à chaque version, je pense que c'est ce que @JasonCohen a été accéder à.

Answer 9

Certaines des techniques très utiles dans ici même si vous ne prévoyez pas d'utiliser powershell pour automatiser le déploiement.

Answer 10

Pour ce que cela vaut, je l'ai vu deviantART site, assez grosse, service de leurs fichiers JS comme 54504.js.Je viens de vérifier et voir ils servent maintenant comme v6core.css?-5855446573 v6core_jc.js?4150339741 etc.

Si le problème de la chaîne de requête provient du serveur, je suppose que vous pouvez contrôler que plus ou moins.