前端缓存 - Githubissues

前端缓存机制

目的是为了减少服务器压力提高性能有利于用户体验

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 去重新走缓存;否则重新读服务器资源

dave-wind / blog

前端缓存 #16

前端缓存机制