JS 캐싱 메커니즘의 5가지 핵심 사항 요약

지식 검토: JS 캐싱 메커니즘의 5가지 핵심 사항, 특정 코드 예제가 필요합니다

소개: 프런트 엔드 개발에서 캐싱은 웹 페이지 성능을 향상시키는 중요한 부분입니다. JavaScript 캐싱 메커니즘은 획득한 리소스를 로컬에 저장하여 후속 액세스에서 캐시를 직접 사용할 수 있도록 함으로써 리소스 로딩 시간과 네트워크 대역폭 소비를 줄이는 것을 의미합니다. 이 기사에서는 JS 캐싱 메커니즘의 핵심 사항을 소개하고 구체적인 코드 예제를 제공합니다.

1. 캐시 유형

1. 강력한 캐시

강력한 캐시는 HTTP 응답 헤더에 Expires 또는 Cache-Control 필드를 설정하여 구현된 캐싱 메커니즘을 의미합니다. 브라우저는 리소스를 요청할 때 해당 리소스가 로컬 캐시에 존재하는지 먼저 확인합니다. 해당 리소스가 존재하고 유효 기간 내에 있는 경우 요청을 보내지 않고 바로 캐시를 사용합니다.

샘플 코드:

// 设置缓存时间为1个小时
res.setHeader('Cache-Control', 'max-age=3600');

2. 협상 캐싱

협상 캐싱은 HTTP 요청 헤더에 If-Modified-Since 또는 If-None-Match 필드를 설정하여 서버와 통신하는 캐싱 메커니즘입니다. 브라우저가 리소스를 요청하면 서버는 먼저 요청 헤더의 필드를 리소스의 마지막 수정 시간과 비교합니다. 리소스가 변경되지 않은 경우 상태 코드 304 Not Modified를 반환합니다. 로컬 캐시를 사용하도록 브라우저에 알립니다.

샘플 코드:

// 获取请求头中的If-Modified-Since字段
const ifModifiedSince = req.headers['if-modified-since'];

// 获取资源的最后修改时间
const lastModified = fs.statSync(filepath).mtime.toUTCString();

// 比较请求头中的字段与最后修改时间
if (ifModifiedSince === lastModified) {
  res.statusCode = 304; // Not Modified
  res.end();
} else {
  res.setHeader('Last-Modified', lastModified);
  // 返回资源
  res.end(file);
}

2. 캐시 위치

1. 브라우저 캐시

브라우저 캐시는 브라우저에 로컬로 캐시된 캐시 파일을 말합니다. 브라우저가 동일한 리소스에 액세스하면 먼저 해당 리소스에 대한 캐시 파일이 있는지 확인하고, 캐시가 있으면 캐시를 직접 사용합니다.

샘플 코드:

// 读取缓存
const cache = localStorage.getItem('cache');

// 判断缓存是否存在
if (cache) {
  // 使用缓存
} else {
  // 发送网络请求
}

2. 서버 캐시

서버 캐시는 서버측에 캐시된 캐시 파일을 말합니다. 브라우저가 리소스를 요청하면 서버는 해당 리소스에 대한 캐시 파일이 있는지 확인하고, 있으면 캐시 파일을 직접 반환합니다.

샘플 코드:

// 判断文件是否存在
if (fs.existsSync(filepath)) {
  // 返回缓存文件
} else {
  // 发送网络请求
}

3. 캐시 시간 제어

1. 캐시 시간

캐시 시간은 강력한 캐시 또는 협상된 캐시의 유효 기간을 말하며 필요에 따라 서로 다른 캐시 시간을 설정할 수 있습니다.

샘플 코드:

// 设置缓存时间为1个小时
res.setHeader('Cache-Control', 'max-age=3600');

2. 캐시 전략

캐시 전략은 리소스 유형이나 리소스 경로에 따라 다양한 캐시 전략을 설정하는 것을 의미합니다. 정규식이나 문자열 일치를 사용하여 다양한 캐싱 전략을 구현할 수 있습니다.

샘플 코드:

// 设置图片资源的缓存时间为1个月
if (req.url.match(/.jpg|.png|.gif$/)) {
  res.setHeader('Cache-Control', 'max-age=2592000');
}

4. 캐시 업데이트

1. 버전 관리

버전 관리는 리소스를 요청할 때 버전 번호를 추가하고, 리소스가 변경되면 버전 번호를 업데이트하는 것을 의미합니다. 버전 번호를 업데이트하여 브라우저가 리소스를 다시 로드하도록 할 수 있습니다.

샘플 코드:

<!-- 添加版本号 -->
<link rel="stylesheet" href="styles.css?v=1.0">
<script src="script.js?v=1.0"></script>

2. 강제 새로 고침

강제 새로 고침은 Cache-Control 필드의 max-age를 0으로 설정하여 즉시 캐시를 업데이트하도록 브라우저에 지시하는 것을 의미합니다.

샘플 코드:

// 强制刷新缓存
res.setHeader('Cache-Control', 'max-age=0');

5. 캐시 삭제

캐시 삭제란 브라우저의 로컬 캐시 파일이나 서버측 캐시 파일을 수동으로 삭제하는 것을 말합니다.

샘플 코드:

// 清除浏览器缓存
localStorage.removeItem('cache');

// 清除服务器缓存
fs.unlinkSync(filepath);

요약: 프런트 엔드 개발의 일반적인 JS 캐싱 메커니즘을 위해 캐시 유형, 캐시 위치, 캐시 시간 제어, 캐시 업데이트 및 캐시 지우기를 포함한 5가지 핵심 사항을 도입했습니다. 이러한 핵심 사항을 숙지하면 캐싱 메커니즘을 더 잘 이해하고 적용하고, 웹 페이지 성능을 개선하고, 사용자 경험을 향상시키는 데 도움이 될 수 있습니다. 이 글의 서문이 모든 독자들에게 도움이 되기를 바랍니다.

위 내용은 JS 캐싱 메커니즘의 5가지 핵심 사항 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!