浏览器缓存机制

本笔记参考

HTTP缓存机制 & cookie/localStorage/sessionStorage

web缓存分类：

1. 数据库数据缓存
2. 服务器端缓存（代理服务器缓存，cdn缓存）
3. 浏览器端缓存
4. web应用层缓存

浏览器缓存机制：

1. http缓存
2. 浏览器本地存储：cookie localstorage sessionStroage

web存储分为localstorage 与sessionstorage两种

cookie与session

http缓存

分类：优先级依次降低，

1. memory cache:存储在内存中给你，一旦窗口关闭，其中的缓存就消失了。一般存储一些体积较小的资源
2. service worker cache：脱离于浏览器窗体，故不能操作dom,可以实现离线缓存、消息推送与网络代理功能
3. disk cache：存储在硬盘中，读写速度较慢，但容积大，
4. push cache：一宗存在于会话截断的缓存，当session终止的时候，缓存也随之释放。

浏览器缓存规则

1. 新鲜度：即缓存副本的有效期。
2. 校验值：etag服务器通过匹配该值来判断缓存是否过期

浏览器的缓存控制

浏览器是否重发数据判断逻辑

浏览器请求新资源缓存过程

本地缓存阶段(也称强缓存)：先在本地查找该资源，如果有发现该资源，而且该资源还没有过期，就使用这一个资源，完全不会发送http请求到服务器；

协商缓存阶段(也称弱缓存)：如果在本地缓存找到对应的资源，但是不知道该资源是否过期或者已经过期，则发一个http请求到服务器，然后服务器判断这个请求，如果请求的资源在服务器上没有改动过，则返回304，让浏览器使用本地找到的那个资源；

缓存失败阶段：当服务器发现请求的资源已经修改过，或者这是一个新的请求(在本来没有找到资源)，服务器则返回该资源的数据，并且返回200， 当然这个是指找到资源的情况下，如果服务器上没有这个资源，则返回404。

Last-Modified/ETag 与 Cache-Control/Expires

• 配置 Last-Modified/ETag的情况下，浏览器再次访问统一URI的资源，还是会发送请求到服务器询问文件是否已经修改，如果没有，服务器会只发送一个304回给浏览器，告诉浏览器直接从自己本地的缓存取数据；如果修改过那就整个数据重新发给浏览器；
• Cache-Control/Expires则不同，如果检测到本地的缓存还是有效的时间范围内，浏览器直接使用本地副本，不会发送任何请求。两者一起使用时， Cache-Control/Expires的优先级要高，即当本地副本根据 Cache-Control/Expires发现还在有效期内时，则不会再次发送请求去服务器询问修改时间 Last-Modified或实体标识 Etag了。
• 一般情况下，两者会配合一起使用，因为即使服务器设置缓存时间, 当用户点击“刷新”按钮时，浏览器会忽略缓存继续向服务器发送请求，这时 Last-Modified/ETag将能够很好利用304，从而减少响应开销。

有Last-Modified为什么还要有ETag？

HTTP1.1中Etag的出现主要是为了解决几个 Last-Modified 比较难解决的问题：

• Last-Modified 标注的最后修改只能精确到秒级，如果某些文件在1秒钟以内，被修改多次的话，它将不能准确标注文件的新鲜度
• 如果某些文件会被定期生成，当有时内容并没有任何变化，但 Last-Modified 却改变了，导致文件没法使用缓存
• 有可能存在服务器没有准确获取文件修改时间，或者与代理服务器时间不一致等情形

当执行相关操作的时候，对应的响应头部字段是否有效。