缓存初探

Posted ningyn0712

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了缓存初探相关的知识,希望对你有一定的参考价值。

我发现我每次写博客都不太会开头,这里从网络请求三步骤开始吧:请求、处理、响应。

前端缓存主要是在“请求”和“响应”中进行。在请求步骤中,浏览器通过缓存能减少发送请求次数;在响应步骤中,浏览器和服务器相互配合,通过减少响应的内容从而减少传输时间

缓存位置优先级由上至下:

Service worker

memory cache

disk cache

网络请求:

从Chrome开发者工具的Network —> size一栏可以看到请求处理方式:

  • 如果是显示数字,几k或者几M,则是表示是从网络传输的
  • 其他的则是from ServiceWorker,from memory cache,from disk cache

 

Service worker:是浏览器在后台独立于网页运行的脚本,类似于一个中间人,浏览器发出的请求都会被Service Worker拦截并被它处理。当有Service Worker时,浏览器会优先从Service Worker读取缓存。

 

memory cache是短期存储,页面刷新时通常是从内存中获取缓存;页面关闭,缓存就失效了,从内存中获取缓存比从硬盘中获取速度快。几乎所有的请求资源都能进入memory cache。浏览器为了加快读取缓存速度而进行的自身的优化行为,不受开发者控制也不受HTTP协议的约束。

从memory cache获取缓存内容时,浏览器会忽视max-age=0,no-cache等头部配置,如果完全不想让一个资源进入缓存,需要使用no-store。

 

disk cache是存在硬盘中的缓存,当页面关闭后再次打开时读取的就是硬盘缓存。

disk cache(HTTP cache)包括强制缓存(强缓存)和协商缓存(对比缓存):首先进行强制缓存,如果强缓存失效,需要使用对比缓存,由服务器决定缓存内容是否失效。

 

强制缓存:

当命中强制缓存时,浏览器不会去请求服务器,而是直接使用本地缓存资源,并返回200

强制缓存直接减少请求数,是提升最大的缓存策略

 

是否命中强制缓存是由头中的expirescache-control控制的。

1、 expires是HTTP1.0时的标准,是表示服务器的过期时间,是格林威治时间,绝对时间。当请求的时候客户端的时间超过expires标识的时间时就会去请求服务器。

2、  但是expires存在的问题是:当用户手动修改了这个时间就会有问题

3、  Cache-control是HTTP1.1的产物,可以看作expires的补充

4、 判断缓存是否过期的步骤:看是否有cache-control的max-age;如果没有则用expires作为过期时间比较

 

Cache-control常用值:

  • Max-age:缓存的最大有效时间,会覆盖expires。不经常更新的资源一般会设置一个很大的值,例如:3453600。
  • S-maxage:如果该值存在,则会优先使用它作为CDN的缓存时间
  • Public:表明响应可以被任何对象包括客户端、服务器缓存
  • Private:只能是发起请求的浏览器进行缓存
  • No-cache:仍然对资源使用缓存,每一次在使用缓存之前必须向服务器对缓存资源进行验证
  • No-store:所有内容都不会被缓存,即不是用强制缓存也不使用协商缓存
  • Must-revalidate:如果配置了max-age,如果超过max-age的时间,即需要对资源的有效性进行验证

 

max-age=0和no-cache在浏览器反应上是没有差别的,两者的区别在于:

max-age=0在语义上被理解为:到期应该(should)重新验证

no-cache:必须(must)重新验证

 

协商缓存:

需要与服务器协商是否使用缓存,命中协商缓存会返回304

协商缓存由响应头中的Last-Modified和ETag + 请求头中的If-Modified-Since和If-None-Match控制

优化点在于:响应体积上的节省,通过减少响应体体积来缩短网络传输时间。对比缓存在请求数上和没有缓存是一样的,但是如果是304返回的仅仅是一个状态码,没有实际的内容

 

Response:Last-Modified + Request:If-Modified-Since

服务器通过传回Last-Modified这个数据告诉浏览器资源最后一次被修改的时间

浏览器将这个Last-Modified值和资源存到缓存数据库中,当再次请求相同的资源时浏览器会将上次Last-Modified值写入到If-Modified-Since中传回服务器,服务器通过对比Last-Modified和If-Modified-Since两个值是否一致,如果一致就返回304,表示资源未被修改;如果两个值不一致说明服务器中该资源被更新,则返回200和新的资源

 

Response:ETag + Request:If-None-Match

整个流程同(Response:Last-Modified + Request:If-Modified-Since)只不过ETag是文件的特殊标识,由服务器生成。

 

ETag的优先级高于Last-Modified。同理,服务器也会优先验证If-None-Match

 

补充一个 CDN缓存:

CDN(Content Delivery Network)内容分发网络

采取与强制缓存相似的机制,把CDN看成是浏览器,把源服务器看成是浏览器需要请求的服务器,此时,源服务器的max-age头决定了资源在CDN节点本地缓存的时间,如果s-maxage存在,则会优先使用s-maxage

 

 

参考文章:

一文读懂前端缓存

扒一扒浏览器缓存机制

以上是关于缓存初探的主要内容,如果未能解决你的问题,请参考以下文章

Caffeine高性能本地缓存框架初探

MyBatis结果映射与MyBatis缓存初探学习记录

SpringCache缓存初探

java初探之静态页面化——客户端缓存

java初探之缓存技术

初探Ignite