HTML 캐싱에 대한 지식에 대해 이야기합시다

웹사이트 방문이 증가함에 따라 웹페이지를 빠르게 로드하는 방법이 사용자 경험의 중요한 측면이 되었습니다. HTML 캐싱 기술은 이 문제를 해결하는 효과적인 수단 중 하나입니다. 이 기사에서는 HTML 캐싱의 개념, 설정 방법 및 최적화 기술을 소개합니다.

1. HTML 캐싱의 개념

HTML 캐싱, 즉 브라우저 캐싱은 페이지 리소스(예: HTML, CSS, JS 및 기타 파일)를 로컬 캐시에서 캐시할 수 있도록 브라우저에 캐싱하는 것을 말합니다. 다음 방문 시 네트워크 요청을 거치지 않고 읽으세요. 이를 통해 리소스 요청 수를 효과적으로 줄이고 페이지 로딩 속도를 높이며 사용자 경험을 향상시킬 수 있습니다.

2. HTML 캐시 설정 방법

1. 서버 측 설정

서버 측에서는 HTTP 응답 헤더를 설정하여 브라우저가 페이지 리소스를 캐시할지 여부를 제어할 수 있습니다. 일반적으로 사용되는 HTTP 응답 헤더는 다음과 같습니다.

• Cache-Control: 캐시 동작을 제어하는 ​​데 사용됩니다. 일반적인 값에는 max-age, no-cache, no-store 등이 포함됩니다. 그 중 max-age는 리소스를 캐시할 수 있는 최대 시간(초)을 나타내고, no-cache는 클라이언트가 캐시된 리소스를 사용하기 전에 캐시된 데이터의 유효성을 강제로 확인해야 함을 나타내며, no-store는 브라우저가 캐시된 리소스를 사용함을 나타냅니다. 데이터 캐싱이 금지되어 있습니다.
• Expires: 캐시 만료 시간으로, 리소스를 다시 요청해야 하는 시기를 브라우저에 알리는 데 사용됩니다.
• Last-Modified: 브라우저가 캐시된 데이터의 유효성을 확인하는 데 사용되는 리소스의 마지막 수정 시간입니다.
• ETag: 리소스의 고유 식별자로, 브라우저가 캐시된 데이터의 유효성을 확인하는 데에도 사용됩니다.

2. 클라이언트 설정

클라이언트 측에서는 다음과 같은 방법으로 HTML 캐시를 설정할 수 있습니다.

• HTML 메타 태그: HTML 파일에 메타 태그를 추가하여 페이지의 캐시 전략을 지정합니다. 일반적으로 사용되는 메타 태그는 다음과 같습니다.

<meta http-equiv="Cache-Control" content="max-age=3600, must-revalidate">
<meta http-equiv="Expires" content="Sat, 1 Jan 2022 00:00:00 GMT">

그 중 Cache-Control 및 Expires의 사용법은 서버 측 설정과 동일합니다.

• JavaScript: JavaScript 코드를 통해 브라우저의 캐싱 정책을 수정합니다. 예:

if( window.localStorage ){ // 支持本地存储 
  if( !localStorage.getItem('firstLoadTime') ){ // 判断是否第一次访问 
    localStorage['firstLoadTime'] = (new Date()).getTime(); 
  }else if( (new Date()).getTime() - localStorage['firstLoadTime'] > 1000 * 60 * 60 * 24 * 7 ){ // 缓存一周 
    localStorage.clear(); 
    localStorage['firstLoadTime'] = (new Date()).getTime(); 
  }
}

이 코드는 페이지의 캐시 시간을 1주일로 설정합니다.

3. HTML 캐싱을 위한 최적화 기술

1. 정적 리소스와 동적 리소스의 분리

정적 리소스(CSS, JS, 그림 등)와 동적 리소스(HTML, PHP, ASP 등)를 분리하는 것은 일반적인 최적화 방식. 이때 정적 리소스에 대한 캐시 시간을 더 길게 설정하여 요청 수와 대역폭 소비를 줄일 수 있습니다.

2. 고유 리소스 로케이터(URL) 디자인

URL 디자인은 캐싱 효율성에도 영향을 미칩니다. 따라서 URL은 다음과 같은 방식으로 설계될 수 있습니다.

• 리소스 유형에 따라 디렉터리를 구분합니다. 예를 들어 "/css/", "/js/", "/img/" 등을 사용하여 디렉터리를 구분합니다.
• URL에 동적 매개변수를 사용하지 마세요. 예를 들어 "/index.php?name=xxx"는 "/user/xxx.html"로 변경될 수 있습니다.

3. 캐시 유효성 검증

캐시 유효성 검증은 서버 측에 설정된 Last-Modified 및 ETag를 통해 이루어질 수 있습니다. 브라우저 캐시가 만료되면 서버에 요청을 보내 캐시된 리소스가 여전히 유효한지 확인할 수 있습니다. 유효하면 캐시된 리소스를 로컬에서 직접 읽을 수 있으며, 그렇지 않으면 리소스를 다시 요청해야 합니다.

4. 요약

HTML 캐싱 기술은 페이지 로딩 속도를 높이고 사용자 경험을 향상시킬 수 있는 효과적인 최적화 방법입니다. 실제 사용 시에는 서버 측 설정과 클라이언트 측 설정을 유연하게 사용해야 하며, 캐시 유효성 검증 및 URL 설계에 주의해야 합니다.

위 내용은 HTML 캐싱에 대한 지식에 대해 이야기합시다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!