Open dave-wind opened 1 year ago
目的是为了 减少服务器压力 提高性能 有利于用户体验
1.强缓存: 强制缓存, 用户请求静态资源 直接从浏览器的内存中读取,不走服务器; (缓存的都是首页之外的其他静态资源) 服务端(nodejs demo): http.createServer((req,res)=>{ res.setHeader('Expires', new Date(Date.now()+10*1000)) // 绝对时间 res.setHeader('Cache-Control', 'max-age=10') // 相对时间 单位秒 // 浏览器 10秒内访问,都会走 memory cache; 如果访问次数多 读浏览器内存,如果不频繁走服务器硬盘 }); 三级缓存原理: 1.先从内存中找,存在 就从内存加载 2.内存没有 就从硬盘中找, 同理 3.硬盘中找不到,就进行网络请求,加载到资源就 缓存到 硬盘和内存 HTTP状态码及区别: 200 from memory cache: 不访问服务器, 加载缓存到内存, 类似session storage 浏览器未关闭 都从内存中读取缓存 200 from disk cache: 不访问服务器 已经在某个时间加载过该资源,直接从硬盘读取缓存,关闭浏览器 数据依据存在 304 Not Modified 访问服务器, 发现数据没有更新, 服务器返回状态码, 然后从缓存中读取数据 其他配置: res.setHeader('Cache-Control', 'no-cache') // 缓存,但每次都会发请求 res.setHeader('Cache-Control', 'no-store')// 这才是真正的不缓存,不走缓存策略 强制缓存弊端: 不会想服务器发送请求, 会导致页面修改后,视图依旧采用老的资源 Last-Modified [对比缓存]: 比较一下在决定用缓存好,还是最新的好. 服务端设置header头 Last-Modified 客户端设置header头 if-modified-since 俩者比较,对比最后修改时间 返回内容 通俗说 就是服务端可以拿到资源最后修改时间,设置Last-Modified , 客户端浏览器 下次请求就会带上 if-modified-since, 然后俩者对比, 如果内容没变, 服务端返回304 让浏览器从缓存中找即可 缺点: 内容没变,修改时间变化了,也会重新读取内容,时间不精确,时间单位为秒级 Etag [对比缓存:] 思路 是根据文件内容修改 判断是否走缓存,比较精准,默认不会根据完整文件内容生成hash戳, 可以取文件某一部分(开头几行作为hash) + 文件总大小 作为hash戳 服务端设置 Etag 内容哈希值, 采用md5方法(不可逆,唯一性) 取 客户端浏览器的 if-node-match 俩者对比
实战 强制缓存 + 对比缓存 思路就是 先走强制缓存 比如 Last-Modified 10s 到了 再判断对比缓存, 如果没变更继续走缓存,如果更新直接请求服务器,再重新缓存 服务端 会根据判断 对比缓存 或者强制缓存 如果依旧是缓存 内容没变 返回状态码304 去重新走缓存;否则重新读服务器资源
实战 强制缓存 + 对比缓存
思路就是 先走强制缓存 比如 Last-Modified 10s 到了 再判断对比缓存, 如果没变更继续走缓存,如果更新直接请求服务器,再重新缓存 服务端 会根据判断 对比缓存 或者强制缓存 如果依旧是缓存 内容没变 返回状态码304 去重新走缓存;否则重新读服务器资源
前端缓存机制