Pourquoi les CSS ne sont-ils pas mis en cache ?

CSS (Cascading Style Sheets), en tant que l'une des technologies les plus élémentaires du développement front-end, est souvent utilisée pour embellir les pages de sites Web et optimiser l'expérience utilisateur. Cependant, les développeurs de sites Web rencontrent souvent un problème lors du débogage des styles CSS : les fichiers CSS ne sont pas mis en cache.

Qu'est-ce que la mise en cache CSS ?

Lors de la visite d'un site Web, le serveur enverra certaines ressources statiques au navigateur, telles que HTML, CSS, JavaScript, images et autres fichiers. Pour améliorer la vitesse de chargement des pages et l'expérience utilisateur, les navigateurs mettent ces fichiers en cache afin que la même page se charge plus rapidement lors de votre prochaine visite. Ce mécanisme de mise en cache est appelé mise en cache HTTP.

Lorsqu'un utilisateur visite une page pour la première fois, le navigateur télécharge toutes les ressources statiques et les enregistre dans le cache local. Lorsque l'utilisateur visite à nouveau la page, le navigateur peut lire ces fichiers directement depuis le cache sans les retélécharger. Cela améliore la vitesse de chargement des pages et réduit la charge du serveur.

Pourquoi les fichiers CSS ne sont-ils pas mis en cache ?

Cependant, parfois, lorsque les développeurs modifient les styles CSS, ils constatent que le navigateur ne met pas à jour les styles de la page, mais charge toujours le fichier mis en cache précédent. C'est le problème avec les fichiers CSS qui ne sont pas mis en cache.

La raison de ce problème est le fonctionnement du mécanisme de mise en cache HTTP. Lorsque le navigateur demande une ressource statique, il apportera un en-tête de requête If-Modified-Since, qui renvoie la valeur Etag de la ressource au serveur. Le serveur vérifiera cet en-tête de requête. Si le cache local du navigateur n'a pas expiré, le serveur renverra un code d'état 304, indiquant que le fichier peut être obtenu à partir du cache local. Par conséquent, même si le développeur met à jour le style CSS, si le navigateur demande toujours le fichier avec l'ancien en-tête de requête, le serveur renverra toujours un code d'état 304, empêchant le navigateur de mettre à jour le style CSS.

Comment résoudre le problème des fichiers CSS qui ne sont pas mis en cache ?

1. Vider le cache du navigateur

Les développeurs peuvent résoudre le problème des fichiers CSS qui ne sont pas mis à jour en vidant le cache du navigateur. Dans le navigateur Chrome, vous pouvez ouvrir la page d'effacement des données en saisissant chrome://settings/clearBrowserData dans la barre d'adresse, sélectionnez effacer le cache du navigateur et les données des cookies, puis cliquez sur le bouton « Effacer les données ».

2. Ajouter le numéro de version à l'URL

Les développeurs peuvent ajouter le numéro de version à l'URL du fichier CSS pour garantir que le navigateur peut obtenir le dernier fichier. Par exemple, ../style.css?v=1.0, après avoir modifié le style, remplacez le numéro de version par d'autres numéros ou horodatages. Le navigateur pensera qu'il s'agit d'un nouveau fichier et mettra à jour le style. Cette méthode nécessite une modification manuelle des liens de fichiers et convient aux petits projets.

3. Définir Cache-Control et Pragma

Les développeurs peuvent définir Cache-Control et Pragma dans l'en-tête de réponse HTTP côté serveur pour contrôler quand et comment le navigateur met en cache les ressources. Par exemple, définir Cache-Control sur no-cache ou max-age=0 et Pragma sur no-cache signifie que le navigateur ne mettra pas en cache la ressource et que chaque requête renverra la dernière version du fichier. Cette méthode convient aux projets plus importants et aux sites Web à fort trafic.

Conclusion

Le problème des fichiers CSS non mis en cache est un problème courant dans le développement front-end, mais en vidant le cache du navigateur, en utilisant les numéros de version et en définissant Cache-Control et Pragma, les utilisateurs peuvent résoudre ce problème et améliorer le site Web. vitesse de chargement et expérience utilisateur.

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!