强缓存和协商缓存


http缓存:

为什么使用缓存:

当浏览器加载一个页面时html引用的外部资源也会加载,css,js图片等重复加载造成资源浪费而且耗时影响用户体验,http缓存就是为了解决这个问题,将静态资源存储在浏览器,下次请求时重复利用,何时用何时不用需要策略保证,而且资源更新那么缓存也要更新

缓存的作用:

提高首屏加载速度,优化用户体验

 减少流量消耗

 减轻服务器压力

强缓存策略:

 在有效期内,浏览器就用旧的,强缓存离不开两个响应头Expires与Cache-Control, 用其一,同时用的话cache-control优先级更高

res.setHeader('Expires', new Date(Date.now()+5*1000).toUTCString())
res.setHeader('Cache-Control','max-age=10')最长10秒

1、Expires是http1.0提出的一个表示资源过期时间的header,它描述的是一个绝对时间,由服务器返回,Expires 受限于本地时间,如果修改了本地时间,可能会造成缓存失效

2、Cache-Control 出现于 HTTP / 1.1,优先级高于 Expires ,表示的是相对时间,不依赖客户端的时间

Cache-Control: public可以被所有用户缓存,包括终端和CDN等中间代理服务器

Cache-Control: private只能被终端浏览器缓存,不允许中继缓存服务器进行缓存

Cache-Control: no-cache,先缓存本地,但是在命中缓存之后必须与服务器验证缓存的新鲜度才能使用

Cache-Control: no-store,不会产生任何缓存

协商缓存:

 更新逻辑比较复杂,需要问后台,这个时候用

1Last-modified & if-Modified-Since,通过协商修改时间为基础的策略,if-Modified-Since取自服务器返回的Last-modified

res.setHeader('last-modified',new Date().toUTCString());
if(new Date(req.headers['if-modified-since']).getTime()+3*1000 > Date.now()){
      console.log('协商缓存。。。。')
      res.statusCode=304
      res.end()
      return
}

2、etag & if-none-match,通过内容判断,后台将返回内容进行摘要给前台,下次请求时后台通过对比摘要来判断内容是否更新

// 协商缓存第二种
const crypto = require('crypto');
// 调用sha1算法,更新content,用十六进制编码
const hash = crypto.createHash('sha1').update(content).digest('hex')
res.setHeader('Etag',hash);
if(req.headers['if-none-match'] === hash){
  console.log('协商缓存。。。。')
  res.statusCode=304;
  res.end()
  return
}
       

相关