CSS에서 캐시를 설정하는 방법

웹사이트 개발 과정에서 우리는 종종 문제에 직면합니다: 웹사이트 접속 속도가 인상적입니다. 그 중 중요한 요소는 웹사이트의 캐시 설정입니다. 이번 글에서는 CSS 캐싱의 원리와 방법, 최적화 기법에 대해 자세히 소개하겠습니다.

1. 캐싱의 원리

웹사이트 캐싱의 원리는 매우 간단합니다. 일반적으로 사용되는 일부 파일을 사용자의 로컬 캐시에 저장하면 다음에 사용자가 동일한 웹사이트를 방문할 때 해당 파일을 로컬에서 직접 읽을 수 있습니다. 로딩 속도 향상.

CSS 파일은 웹 사이트의 모양, 상호 작용 및 기타 측면에 영향을 미치기 때문에 웹 사이트의 중요한 부분입니다. 캐시를 설정할 때 HTTP 헤더를 사용하여 CSS 파일에 대한 캐싱 정책을 지정하면 브라우저가 파일에 처음 액세스할 때 파일을 캐시하고 다시 액세스할 때 캐시에서 직접 읽을 수 있습니다.

2. 캐시 설정 방법

CSS 파일의 캐시 설정에는 주로 Expires와 Cache-Control이라는 두 가지 HTTP 헤더가 포함됩니다.

1. Expires

Expires는 파일의 만료 시간을 설정하는 데 사용되는 HTTP 헤더입니다. 이 헤더를 설정할 때 Expires: Fri, 01 Jan 2022 00:00:00 GMT와 같은 고정 만료 시간을 지정하거나 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

클라이언트가 처음으로 파일에 액세스하면 파일이 캐시되고 캐시 만료 시간이 로컬에 저장됩니다. 다음에 파일에 다시 액세스하면 브라우저는 캐시가 만료되었는지 여부를 확인합니다. 만료되지 않은 경우 파일을 캐시에서 직접 읽고, 그렇지 않으면 파일을 다시 요청합니다.

2. Expires 헤더는 클라이언트 시간에 따라 달라집니다. 클라이언트 시간이 정확하지 않으면 캐시 설정이 유효하지 않을 수 있습니다.

Cache-Control

Expires와 비교하여 Cache-Control은 더 유연합니다. 이는 Cache-Control: max-age=3600, public과 같은 여러 지시어가 포함된 문자열 값을 갖는 HTTP 헤더이기도 합니다.

3. 일반적으로 사용되는 지침은 다음과 같습니다.

max-age: 파일의 캐시 시간을 초 단위로 지정합니다.
no-cache: 캐시가 만료되었는지 여부를 먼저 서버에서 확인해야 한다고 클라이언트에 알립니다.
public: 파일은 공개 캐시(예: CDN)에 의해 캐시될 수 있습니다.

4. private: 이 파일은 브라우저 캐시와 같은 개인 캐시에 의해서만 캐시될 수 있습니다.

Cache-Control이 만료를 재정의한다는 점에 유의해야 합니다.

3. 캐시 최적화 기술

버전 관리

웹사이트 개발에서는 CSS 파일의 내용이 자주 변경됩니다. 캐시 설정을 수정하지 않으면 캐시가 만료된 후 브라우저가 파일을 다시 다운로드하므로 웹사이트 로드 속도가 느려집니다.

이 문제를 해결하려면 style.css?v=1.0과 같이 CSS 파일의 URL에 버전 번호를 추가하면 됩니다. 파일 내용이 변경될 때마다 버전 번호만 업데이트하면 브라우저는 이를 새 파일로 간주하여 다시 다운로드하게 됩니다. 🎜🎜🎜CSS 파일 분할🎜🎜🎜때때로 우리가 작성하는 CSS 파일이 너무 커서 페이지 렌더링 속도가 느려질 수 있습니다. 이 시점에서 브라우저가 병렬로 다운로드할 수 있도록 CSS 파일을 여러 개의 작은 파일로 분할할 수 있습니다. 🎜🎜동시에 일반적으로 사용되는 CSS 부분을 HTML에 인라인 처리하면 여러 개의 작은 파일을 로드하는 것을 방지하고 페이지 로딩 속도를 향상시킬 수 있습니다. 🎜🎜🎜Gzip 압축 활성화🎜🎜🎜Gzip 압축은 텍스트 파일(예: CSS 파일)을 압축하는 서버 측 방법입니다. 파일 크기를 크게 줄여 파일 다운로드 속도를 높일 수 있습니다. 🎜🎜Nginx 또는 Apache와 같은 웹 서버에서는 구성을 통해 Gzip 압축을 활성화할 수 있습니다. 🎜🎜🎜CDN 사용🎜🎜🎜CDN은 전 세계 여러 서버에 리소스 파일을 캐시하여 파일 로딩 속도를 향상시킬 수 있는 중앙 집중식 분산 배포 서비스입니다. 🎜🎜CDN에 CSS 파일을 호스팅하면 사용자가 웹사이트를 방문할 때 가장 가까운 CDN 서버를 통해 파일이 로드되므로 페이지 렌더링 속도가 빨라집니다. 🎜🎜주요 CDN 서비스 제공업체에는 Alibaba Cloud, Tencent Cloud, Huawei Cloud 등이 있습니다. 🎜🎜4. 요약🎜🎜CSS 캐시 설정은 웹사이트 최적화의 중요한 부분입니다. 캐시를 적절하게 설정하면 파일 다운로드 시간을 크게 줄이고 웹사이트 성능과 사용자 경험을 향상시킬 수 있습니다. 실제 개발에서는 특정 상황에 따라 자신에게 맞는 캐시 설정 솔루션을 선택하고 지속적으로 최적화하여 웹 사이트 성능을 향상시켜야 합니다. 🎜

위 내용은 CSS에서 캐시를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!