强缓存和协商缓存
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,不会产生任何缓存
协商缓存:
更新逻辑比较复杂,需要问后台,这个时候用
1、Last-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 }