Comment définir le cache en CSS

Lors du processus de développement d'un site Web, nous rencontrons souvent un problème : la vitesse d'accès au site Web est impressionnante. Parmi eux, les paramètres de cache du site Web sont un facteur important. Dans cet article, je présenterai en détail les principes, méthodes et techniques d'optimisation de la mise en cache CSS.

1. Principe de la mise en cache

Le principe de la mise en cache d'un site Web est très simple : enregistrez certains fichiers couramment utilisés dans le cache local de l'utilisateur. La prochaine fois que l'utilisateur visitera le même site Web, le fichier pourra ainsi être lu directement depuis le cache local. améliorer la vitesse de chargement.

Le fichier CSS est une partie importante du site Web car il affecte l'apparence, l'interaction et d'autres aspects du site Web. Lors de la configuration du cache, nous pouvons utiliser les en-têtes HTTP pour spécifier une politique de mise en cache pour un fichier CSS, permettant au navigateur de mettre en cache le fichier lors de son premier accès, puis de le lire directement à partir du cache lors d'un nouvel accès.

2. Méthode de configuration du cache

Les paramètres de cache pour les fichiers CSS impliquent principalement deux en-têtes HTTP : Expires et Cache-Control.

1. Expires

Expires est un en-tête HTTP utilisé pour définir le délai d'expiration du fichier. Lors de la définition de cet en-tête, nous pouvons spécifier une heure d'expiration fixe, telle que Expire : vendredi 1er janvier 2022 00:00:00 GMT, ou définir une heure relative, telle que Expire : 1h . Expires: Fri, 01 Jan 2022 00:00:00 GMT，或者设置一个相对时间，例如 Expires: 1h。

当客户端第一次访问该文件时，会将其缓存下来，并将缓存过期时间保存在本地。当下次再次访问该文件时，浏览器会判断缓存是否已过期，如果未过期，则直接从缓存中读取文件，否则重新请求该文件。

需要注意的是，Expires 头依赖客户端时间，如果客户端时间不准确，则缓存设置可能无效。

2. Cache-Control

相比 Expires，Cache-Control 更为灵活。它也是一个 HTTP 头，其值为一个包含多个指令的字符串，例如 Cache-Control: max-age=3600, public。

其中一些常用指令包括：

• max-age：指定文件的缓存时间，单位为秒。
• no-cache：告诉客户端必须先向服务器验证缓存是否过期。
• public：该文件可以被公共缓存（如 CDN）缓存。
• private：该文件只能被私有缓存缓存，如浏览器缓存。

需要注意的是，Cache-Control 会覆盖 Expires。

三、缓存的优化技巧

1. 版本号控制

在网站开发中，经常会改变 CSS 文件的内容。如果不修改缓存设置，缓存过期后，浏览器会重新下载文件，导致网站加载速度变慢。

为了解决这个问题，我们可以在 CSS 文件的 URL 中添加版本号，例如 style.css?v=1.0

Lorsque le client accède au fichier pour la première fois, il sera mis en cache et le délai d'expiration du cache sera enregistré localement. Lors du prochain accès au fichier, le navigateur déterminera si le cache a expiré. S'il n'a pas expiré, le fichier sera lu directement à partir du cache, sinon le fichier sera à nouveau demandé.

2. Il convient de noter que l'en-tête Expires dépend de l'heure du client. Si l'heure du client est inexacte, les paramètres du cache peuvent être invalides.

Cache-Control

Par rapport à Expires, Cache-Control est plus flexible. Il s'agit également d'un en-tête HTTP dont la valeur est une chaîne contenant plusieurs directives, telles que Cache-Control: max-age=3600, public.

3. Certaines des instructions couramment utilisées incluent :

max-age : Spécifiez la durée de cache du fichier, en secondes.
no-cache : Indique au client qu'il doit d'abord vérifier auprès du serveur si le cache a expiré.
public : le fichier peut être mis en cache par des caches publics (tels que les CDN).

4. privé : ce fichier ne peut être mis en cache que par des caches privés, tels que les caches du navigateur.

Il convient de noter que Cache-Control remplacera Expires.

3. Compétences en optimisation du cache

Contrôle du numéro de version

Dans le développement de sites Web, le contenu des fichiers CSS est souvent modifié. Si vous ne modifiez pas les paramètres du cache, le navigateur téléchargera à nouveau le fichier après l'expiration du cache, ce qui ralentira le chargement du site Web.

Pour résoudre ce problème, nous pouvons ajouter le numéro de version à l'URL du fichier CSS, tel que style.css?v=1.0. Chaque fois que le contenu du fichier change, il vous suffit de mettre à jour le numéro de version, et le navigateur pensera qu'il s'agit d'un nouveau fichier et le téléchargera à nouveau. 🎜🎜🎜Fichiers CSS divisés🎜🎜🎜Parfois, les fichiers CSS que nous écrivons peuvent être très volumineux, ce qui ralentit la vitesse de rendu des pages. À ce stade, nous pouvons diviser le fichier CSS en plusieurs fichiers plus petits afin que le navigateur puisse les télécharger en parallèle. 🎜🎜Dans le même temps, l'intégration de parties CSS couramment utilisées dans HTML peut éviter de charger plusieurs petits fichiers et améliorer la vitesse de chargement des pages. 🎜🎜🎜Activer la compression Gzip🎜🎜🎜La compression Gzip est un moyen côté serveur de compresser des fichiers texte (tels que des fichiers CSS). Il peut réduire considérablement la taille des fichiers, accélérant ainsi les téléchargements de fichiers. 🎜🎜Sur les serveurs Web tels que Nginx ou Apache, nous pouvons activer la compression Gzip via la configuration. 🎜🎜🎜Utiliser CDN🎜🎜🎜CDN est un service de déploiement centralisé et distribué qui peut mettre en cache des fichiers de ressources sur plusieurs serveurs dans le monde, améliorant ainsi la vitesse de chargement des fichiers. 🎜🎜Lorsque nous hébergeons des fichiers CSS sur un CDN, lorsque les utilisateurs visitent le site Web, les fichiers seront chargés via le serveur CDN le plus proche, accélérant ainsi le rendu des pages. 🎜🎜Les principaux fournisseurs de services CDN incluent Alibaba Cloud, Tencent Cloud, Huawei Cloud, etc. 🎜🎜4. Résumé🎜🎜Les paramètres du cache CSS sont une partie importante de l'optimisation du site Web. En configurant correctement le cache, vous pouvez réduire considérablement le temps de téléchargement des fichiers et améliorer les performances du site Web et l'expérience utilisateur. Dans le développement réel, nous devons choisir une solution de configuration du cache qui nous convient en fonction de circonstances spécifiques et l'optimiser en permanence pour améliorer les performances du site Web. 🎜

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!