So legen Sie den Cache in CSS fest

Während des Website-Entwicklungsprozesses stoßen wir häufig auf ein Problem: Die Zugriffsgeschwindigkeit der Website ist beeindruckend. Ein wichtiger Faktor sind dabei die Cache-Einstellungen der Website. In diesem Artikel werde ich die Prinzipien, Methoden und Optimierungstechniken des CSS-Cachings ausführlich vorstellen.

1. Prinzip des Cachings

Das Prinzip des Website-Cachings ist sehr einfach: Speichern Sie einige häufig verwendete Dateien im lokalen Cache des Benutzers. Wenn der Benutzer das nächste Mal dieselbe Website besucht, kann die Datei dadurch direkt gelesen werden Verbesserung der Ladegeschwindigkeit.

CSS-Datei ist ein wichtiger Teil der Website, da sie das Erscheinungsbild, die Interaktion und andere Aspekte der Website beeinflusst. Beim Einrichten des Caches können wir HTTP-Header verwenden, um eine Caching-Richtlinie für eine CSS-Datei festzulegen, die es dem Browser ermöglicht, die Datei beim ersten Zugriff zwischenzuspeichern und sie dann beim erneuten Zugriff direkt aus dem Cache zu lesen.

2. Cache-Einstellungsmethode

Cache-Einstellungen für CSS-Dateien umfassen hauptsächlich zwei HTTP-Header: Expires und Cache-Control.

1. Expires

Expires ist ein HTTP-Header, der zum Festlegen der Ablaufzeit der Datei verwendet wird. Beim Festlegen dieses Headers können wir eine feste Ablaufzeit angeben, z. B. Expires: Fr, 01 Jan 2022 00:00:00 GMT, oder eine relative Zeit festlegen, z. B. Expires: 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

Wenn der Client zum ersten Mal auf die Datei zugreift, wird sie zwischengespeichert und die Cache-Ablaufzeit wird lokal gespeichert. Beim nächsten erneuten Zugriff auf die Datei stellt der Browser fest, ob der Cache abgelaufen ist. Wenn er nicht abgelaufen ist, wird die Datei direkt aus dem Cache gelesen, andernfalls wird die Datei erneut angefordert.

2. Es ist zu beachten, dass der Expires-Header von der Clientzeit abhängt. Wenn die Clientzeit ungenau ist, sind die Cache-Einstellungen möglicherweise ungültig.

Cache-Control

Im Vergleich zu Expires ist Cache-Control flexibler. Es handelt sich außerdem um einen HTTP-Header, dessen Wert eine Zeichenfolge ist, die mehrere Anweisungen enthält, beispielsweise Cache-Control: max-age=3600, public.

3. Zu den häufig verwendeten Anweisungen gehören:

max-age: Gibt die Cache-Zeit der Datei in Sekunden an.
no-cache: Teilt dem Client mit, dass er zunächst beim Server überprüfen muss, ob der Cache abgelaufen ist.
öffentlich: Die Datei kann von öffentlichen Caches (z. B. CDNs) zwischengespeichert werden.

4. privat: Diese Datei kann nur von privaten Caches, z. B. Browser-Caches, zwischengespeichert werden.

Es ist zu beachten, dass die Cache-Kontrolle die Ablauffristen außer Kraft setzt.

3. Fähigkeiten zur Cache-Optimierung

Versionsnummernkontrolle

Bei der Website-Entwicklung wird der Inhalt von CSS-Dateien häufig geändert. Wenn Sie die Cache-Einstellungen nicht ändern, lädt der Browser die Datei nach Ablauf des Caches erneut herunter, wodurch die Website langsamer geladen wird.

Um dieses Problem zu lösen, können wir die Versionsnummer zur URL der CSS-Datei hinzufügen, z. B. style.css?v=1.0. Jedes Mal, wenn sich der Dateiinhalt ändert, müssen Sie nur die Versionsnummer aktualisieren, und der Browser geht davon aus, dass es sich um eine neue Datei handelt, und lädt sie erneut herunter. 🎜🎜🎜Aufgeteilte CSS-Dateien🎜🎜🎜Manchmal sind die von uns geschriebenen CSS-Dateien möglicherweise sehr groß, was dazu führt, dass die Seitenrenderinggeschwindigkeit langsamer wird. An dieser Stelle können wir die CSS-Datei in mehrere kleinere Dateien aufteilen, damit der Browser sie parallel herunterladen kann. 🎜🎜Gleichzeitig kann das Inlining häufig verwendeter CSS-Teile in HTML das Laden mehrerer kleiner Dateien vermeiden und die Seitenladegeschwindigkeit verbessern. 🎜🎜🎜Gzip-Komprimierung aktivieren🎜🎜🎜Gzip-Komprimierung ist eine serverseitige Methode zum Komprimieren von Textdateien (z. B. CSS-Dateien). Es kann die Dateigröße erheblich reduzieren und dadurch das Herunterladen von Dateien beschleunigen. 🎜🎜Auf Webservern wie Nginx oder Apache können wir die Gzip-Komprimierung durch Konfiguration aktivieren. 🎜🎜🎜CDN verwenden🎜🎜🎜CDN ist ein zentralisierter, verteilter Bereitstellungsdienst, der Ressourcendateien auf mehreren Servern auf der ganzen Welt zwischenspeichern kann und so die Geschwindigkeit beim Laden von Dateien verbessert. 🎜🎜Wenn wir CSS-Dateien auf einem CDN hosten und Benutzer die Website besuchen, werden die Dateien über den nächstgelegenen CDN-Server geladen, wodurch das Rendern der Seite beschleunigt wird. 🎜🎜Zu den wichtigsten CDN-Dienstanbietern gehören Alibaba Cloud, Tencent Cloud, Huawei Cloud usw. 🎜🎜4. Zusammenfassung🎜🎜CSS-Cache-Einstellungen sind ein wichtiger Bestandteil der Website-Optimierung. Durch die richtige Einstellung des Caches können Sie die Downloadzeit von Dateien erheblich verkürzen und die Leistung und Benutzererfahrung der Website verbessern. In der tatsächlichen Entwicklung müssen wir basierend auf bestimmten Umständen eine Cache-Einstellungslösung auswählen, die zu uns passt, und diese kontinuierlich optimieren, um die Website-Leistung zu verbessern. 🎜

Das obige ist der detaillierte Inhalt vonSo legen Sie den Cache in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!