1.强缓存
强缓存会直接从本地缓存中读取,不发送请求给服务器。
cache-control
的几个取值定义:
max-age:设置强缓存时长(s),单位是s,如3600s;
no-cache:不进行强缓存;
no-store:不进行强缓存也不进行协商缓存,每次都向服务器发送资源请求;
private:仅浏览器缓存;
public:浏览器和代理服务器都可以缓存。
强缓存的存储地点分为:
memory cache(内存缓存),较大的资源,状态码200
dist cache(磁盘缓存),较小的资源,状态码200
强缓存除了使用Cache-Control实现之外,还可以使用Expires
字段,Expires是Http1.0规范,Cache-Control是Http1.1规范,Expires返回一个具体的时间值,代表缓存的有效期,在该日期内浏览器不会向服务器发起请求,而是直接从缓存里获取资源。
2.协商缓存
由服务器来告诉浏览器是否使用缓存资源
浏览器像服务端发起请求,服务端收到请求后,根据last-modified
和etag
判断缓存是否过期,如果过期,状态码200
,将最新资源返回给前端,如果没有过期,返回状态码304
,使用缓存
ETag
:操作系统根据文件内容生成一个hash值,文件内容变化,它就会变化。对应请求头If-None-Match
Last-Modified
:文件的最后修改时间 对应请求头 If-Modified-Since
Etag比Last-Modified优先级更高
3.刷新对缓存的影响
1.f5刷新网页时,跳过强缓存,进行协商缓存
2.ctrl+f5刷新页面时会跳过强缓存和协商缓存,直接向服务器请求
vue.config.js中设置css,js打包时带上时间戳
const timestamp = new Date().getTime()
module.exports = {
//css
css: {
extract: {
filename: `static/css/[name].${timestamp}.css`,
chunkFilename: `static/css/[name].${timestamp}.css`
}
},
//js
configureWebpack: {
output: {
// 输出重构 打包编译后的 文件名称 【模块名称.时间戳】
filename: `static/js/[name].${timestamp}.js`,
chunkFilename: `static/js/[name].${timestamp}.js`
},
}
5.总结
缓存类型 | 获取资源形式 | 状态码 | 发送请求到服务器 |
---|---|---|---|
强缓存 | 从缓存取 | 200(from cache) | 否,直接从缓存取 |
协商缓存 | 从缓存取 | 304(Not Modified) | 否,通过服务器来告知缓存是否可用 |
综上所述,强缓存优先级高于协商缓存,强缓存是由浏览器自己判断是否可以使用缓存,而协商缓存是通过与服务器进行通信来确定是否可以使用缓存。