HTML 설정 캐시

웹 애플리케이션이 개발되면서 페이지에 포함되는 데이터와 파일이 점점 더 많아지고 있습니다. 일부 재사용된 데이터 및 파일의 경우 브라우저의 캐싱 메커니즘은 네트워크 요청을 효과적으로 줄이고 사용자가 페이지에 액세스하는 속도를 높일 수 있습니다. HTML에서 캐시를 설정하는 것은 간단하고 효과적인 방법입니다. HTML에서 캐시를 설정하는 방법을 소개하겠습니다.

1. 캐시를 설정하는 이유는 무엇인가요?

웹을 탐색할 때 페이지가 로드될 때마다 HTML, CSS, JavaScript 및 기타 파일은 물론 사진, 비디오 및 기타 리소스에 대한 요청을 포함한 네트워크 요청이 트리거됩니다. 네트워크 요청에 필요한 시간은 페이지 로딩 속도의 병목 현상이 되는 경우가 많으므로 페이지 로딩 속도를 높이려면 요청 수를 줄이는 것이 중요합니다.

이때 브라우저의 캐싱 메커니즘이 작동해야 합니다. 사용자가 처음으로 페이지를 요청하면 브라우저는 페이지의 리소스(예: CSS, JavaScript 및 기타 파일)를 캐시합니다. 사용자가 페이지를 다시 방문하면 브라우저는 새 요청을 시작할 필요 없이 캐시에서 직접 이러한 리소스를 얻을 수 있습니다. 이는 서버의 부하를 줄일 뿐만 아니라 사용자 접속 속도도 크게 향상시킵니다.

2. HTML에서 캐시를 설정하는 방법은 무엇입니까?

HTML에서 HTTP 헤더를 사용하여 캐싱 사용 방법을 제어할 수 있습니다. 일반적으로 사용되는 HTTP 헤더에는 Expires 및 Cache-Control이 포함됩니다.

1. Expires

Expires는 브라우저가 리소스가 유효한 것으로 간주하기 전의 날짜나 시간을 지정합니다. 이 날짜 또는 시간 이후에 리소스에 다시 액세스하면 브라우저는 리소스를 다시 요청합니다.

서버 측에서는 응답 헤더에 만료를 설정하여 브라우저 캐싱을 달성할 수 있습니다. 예를 들어 Expires를 지금부터 30일로 설정합니다.

Expires: Fri, 16 Jul 2021 20:00:00 GMT

2. Cache-Control

Cache-Control은 캐싱을 제어하는 ​​최신 HTTP 헤더 중 하나입니다. Cache-Control을 통해 캐시 전략을 세밀하게 제어할 수 있습니다.

일반적으로 사용되는 캐시 제어 속성은 다음과 같습니다.

• public: 캐시는 모든 사용자(프록시 서버 포함)가 캐시할 수 있습니다.
• private: 캐시는 최종 사용자만 캐시할 수 있으며 중간 프록시 서버는 캐시할 수 없습니다.
• max- age: 캐시 만료 시간을 초 단위로 설정합니다.

예를 들어 Cache-Control을 공개로 설정하고 max-age를 지금부터 일주일로 설정합니다.

Cache-Control: public, max-age=604800

3. ETag

ETag는 캐싱을 제어하는 ​​또 다른 메커니즘으로, 응답 콘텐츠 식별자를 기반으로 생성된 고유한 메커니즘입니다. 브라우저가 리소스를 요청하면 서버는 리소스의 ETag 값을 브라우저에 반환합니다. 다음에 리소스가 요청되면 브라우저는 If-None-Match를 통해 이전 ETag 값을 서버로 전송하여 리소스가 변경되었는지 묻습니다.

리소스가 변경되지 않은 경우 서버는 304 Not Modified 응답을 반환하고 응답 헤더에 ETag를 포함합니다. 리소스가 변경된 경우 서버는 새 리소스를 반환하고 ETag를 업데이트합니다.

서버 측에서는 응답 헤더에 ETag를 설정하여 브라우저 캐싱을 구현할 수 있습니다. 예:

ETag: "1234"

3. 캐시 설정 시 주의사항

캐시를 사용하는 동안 다음 사항에도 주의해야 합니다.

1. 개인 정보 캐싱 방지

캐시가 공개 속성을 설정하면 브라우저 캐시 및 프록시 서버 캐시를 포함하여 모든 사용자가 캐시된 콘텐츠에 액세스할 수 있습니다. 따라서 개인정보(예: 사용자 비밀번호 등)를 캐싱하는 것을 방지해야 합니다.

2. 캐시를 업데이트할 때 강제 새로고침을 고려해야 합니다.

페이지 콘텐츠가 변경되면 사용자의 브라우저 캐시를 새로 고쳐야 합니다. 이때 Cache-Control의 max-age 속성을 이용하여 캐시 유효 시간을 초 단위로 설정할 수 있습니다.

예를 들어 Cache-Control을 max-age=0으로 설정하면 브라우저가 강제로 리소스를 다시 요청하고 캐시를 업데이트할 수 있습니다.

Cache-Control: max-age=0

3. 리소스마다 캐싱 전략을 다르게 설정해야 합니다

대부분의 정적 리소스(예: 이미지, CSS, JS 등), max-age를 더 긴 시간으로 설정하여 운영 효율성을 향상시킬 수 있습니다. 자주 변경되는 일부 동적 리소스의 경우 ETag와 같은 메커니즘을 사용하여 리소스가 요청될 때마다 업데이트되도록 해야 합니다.

요약:

HTML에서 캐시를 설정하는 것은 페이지 성능을 향상시키는 일반적인 방법 중 하나입니다. Expires, Cache-Control 및 ETag와 같은 HTTP 헤더를 설정하면 브라우저의 캐싱 메커니즘을 구현하고 사용자 액세스 속도를 향상시킬 수 있습니다. 캐시를 설정할 때 최상의 결과를 얻으려면 캐시의 세부 설정과 다양한 리소스에 대한 다양한 캐싱 전략에 주의해야 합니다.

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