Comment faire en sorte que l'interface frontale efface automatiquement le cache des fichiers js et css

Lors du processus de développement de projets Web, nous faisons souvent référence aux fichiers css et js. Des problèmes de mise en cache surviennent souvent après la mise à jour des fichiers (le code est évidemment modifié, mais il n'y a aucun changement lors de l'accès sur le navigateur). , nous utilisons généralement les deux solutions suivantes :

1 videz manuellement le cache du navigateur

2 Ajoutez le numéro de version (tel que layout.css?v=1)

Mon avis personnel 2 est plus rapide, car pour vider le cache du navigateur, il faut encore attendre la réponse du navigateur. Mais il est difficile de changer le numéro de version à chaque fois, vous devez donc trouver un moyen d'ajouter automatiquement le numéro de version

Voici les méthodes que j'ai collectées :

Méthode 1 : Vous. peut ajouter automatiquement le numéro de version au HTML via js

<script type="text/javascript"> 
document.write("<link rel=&#39;stylesheet&#39; type=&#39;text/css&#39; href=&#39;/css/layout.css?v="+new Date().getTime()+"&#39;>");  
</script>

Méthode 2 : S'il s'agit d'une page jsp, vous pouvez utiliser du code java pour générer un horodatage (s'il s'agit d'une page jsp, vous pouvez également utiliser méthode 1, mais cette méthode est plus pratique)

<link rel="stylesheet" type="text/css" href="/css/layout.css?v=<%=System.currentTimeMillis() %>">

Méthode 3 : Utilisez d'autres méthodes pour ajouter le numéro de version, comme la configuration automatique avec node.js, etc.

ps : Le but de vider le cache est de voir la mise à jour de la page à temps. Lorsque nous mettons la page en ligne (c'est-à-dire que nous la déployons dans un environnement formel, aucune modification ne sera apportée), il est recommandé de corriger le numéro de version, car le L'accès aux pages mises en cache est plus rapide et modifiez le numéro de version fixe lorsqu'il doit être mis à jour.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment résoudre les lacunes dans les images dans H5

À quels aspects faut-il prêter attention dans la structure des pages de html5

Comment utiliser localStorage et sessionStorage

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!