HTTP缓存

HTTP缓存

定义

1、http缓存是在http请求传输时用到的缓存，主要用于对一些实时性要求不高的文件，浏览器端在用户内存或者硬盘上对最近请求过的文档进行存储，其缓存机制是根据http报文的缓存标识进行的，主要在服务器代码上设置

2、当浏览器向服务器请求资源的时候，都会率先抵达浏览器缓存，如果浏览器有这个资源请求的副本，就可以直接从浏览器获取资源，而不用去请求浏览器

3、常用的http请求只能缓存get请求响应的资源，对于其他类型的响应无效

4、http缓存都是从第二次请求开始的，第一次请求资源的时候，服务器返回资源并在response header中回传缓存参数。第二次请求的时候，判断这些参数，命中强缓存则返回200，否则就将参数加到request header中去请求，看是否命中协商缓存，命中则返回304，否则返回新的资源和规则缓存类型

目的

1、加快页面的打开速度

2、减少请求次数，降低服务器压力

3、减少网路损耗

缓存过程

浏览器第一次缓存过程：

强缓存

• 规则

  • 命中强缓存
    

  • 未命中强缓存
    

• 字段

  • expires（http1.0）

    • pragma：控制缓存行为，与http1.1的cache-control类似，但是优先级比cache-control、expires高
    • expires：过期时间，是服务器的过期时间，如果与客户端不一致，会存在缓存时间误差，cache-control优先于expires
      

  • cache-control（http1.1）

    • 作为请求头属性值说明
      

    • 作为响应头属性值说明
      

协商缓存

• 规则

  • 命中协商缓存
    

  • 未命中协商缓存
    

• 字段

  • Last-Modified与ETag是可以一起使用的，服务器会优先验证ETag，一致的情况下，才会继续比对Last-Modified，最后才决定是否返回304。
    

缓存策略

• 强缓存优先于协商缓存

存储位置

Service Worker：独立线程

• 使用https(需要保障安全)，首先注册Service Worker，监听install事件，进行缓存操作，下次访问前进行拦截请求，判断缓存，如果没有命中缓存，则使用fetch去读取数据
  

Memory Cache：内存存储

• 读取速度高效，存储容量小，缓存时间短，关闭tab页面，缓存释放

Disk Cache：硬盘存储

• 与内存存储相比，读取速度较慢，存储容量大，缓存时间长，需要手动清除数据

Push Cache：推送缓存

• 是HTTP/2的内容，优先级最低，只在session中存在，会话结束就释放，缓存时间很短暂，在google中只有5分钟左右

用户行为

1、打开一个新的页面，正常触发浏览器缓存机制

2、路径url跳转，正常触发浏览器缓存机制

3、F5刷新，浏览器设置max-age=0，跳过强缓存，进行协商缓存判断

4、ctrl+F5强制刷新，跳过强缓存和协商缓存，直接从服务器拉取资源

问题

1、既生last-modified何生etag

• last-modified的时间只能精确到秒，若一秒钟修改多次则不能准确标注时间；若有文件定期生成，内容不变last-modified变了，无法使用缓存；存在服务器与缓存系统之间缓存时间误差问题。

2、如何禁用缓存

• 请求路径添加随机数
• ctrl+F5强制刷新

3、如何设置缓存

• html页面缓存的设置主要是在标签中嵌入标签，这种方式只对页面有效，对页面上的资源无效

  <meta http-equiv="Cache-Control" content="max-age=7200" />

• 静态资源的缓存一般是在web服务器上配置的，常用的web服务器有：nginx、apache。

注意点

1、强缓存情况下，若服务器资源有更改，但缓存资源还没过期，还是会从缓存取数据

2、减少304的请求，因为还是要和服务器交互

3、火狐中不能识别cache-control: no-cache，为兼容应写成cache-control: no-cache,no-store

参考链接

1、https://www.cnblogs.com/ranyonsue/p/8918908.html

2、https://www.cnblogs.com/suihang/p/12855345.html

3、https://juejin.im/post/6844903801778864136

4、https://www.jianshu.com/p/227cee9c8d15