主页 > 网赚优化 > 从前端角度理解缓存(2)

从前端角度理解缓存(2)

协商缓存

协商缓存解决了无法及时获取更新资源的问题。以下两组字段,都可以对资源做标识,由服务器做分析,如果未进行更新,那返回304状态码,从缓存中读取资源,否则重新请求资源。

last-modify

last-modify告知了客户端上次修改该资源的时间,

Last-Modified: Wed, 02 Jan 2019 03:06:03 GMT

浏览器将这个值记录在if-modify-since中(浏览器自动记录了该字段信息),下一次请求相同资源时,与服务器返回的last-modify进行比对,如果相等,则表示未修改,响应 304;反之,则表示修改了,响应 200 状态码,并返回数据。

last-modify以秒为单位进行更新,如果小于该单位高频进行更新的话,不适合采用该方法。

ETag

ETag是对资源的特殊标识

Etag: W/"e563df87b65299122770e0a84ada084f"

请求该资源成功之后,将返回的ETag存入if-none-match字段中(浏览器自动记录了该字段信息),同样在请求资源时传递给服务器,服务器查询该编码对应的资源有无更新,无更新返回304状态,更新返回200并重新请求。

以下有个小例子,查询书籍更新:

当书籍信息查询之后,再次查询,服务器根据资源的ETag查询得知该资源没有进行更新,返回304状态码。

从前端角度理解缓存

更新返回的数据信息,再次查询,返回200状态码,重新进行请求:

从前端角度理解缓存

从返回的Request Headers可以看出,再次请求时,浏览器自动发送了If-Modified-SinceIf-None-Match两个字段,浏览器根据这两个字段中(If-None-Match 优先级大于 If-Modified-Since)来判断是否修改了资源。

从前端角度理解缓存

ETag如何计算

ETag是针对某个文件的特殊标识,服务器默认采用SHA256算法生成。也可以采用其他方式,保证编码的唯一性即可。

缓存的优先级

根据上文优缺点的比对,可以得出以下的优先级顺序:

Cache-Control > Expires > ETag > Last-Modified

如果资源需要用到强制缓存,Cache-Control相对更加安全,协商缓存中利用ETag查询更新更加全面。

从前端角度理解缓存

缓存存储在哪

disk cache

disk cache为存储在硬盘中的缓存,存储在硬盘中的资源相对稳定,不会随着tab或浏览器的关闭而消失,可以用来存储大型的,需长久使用的资源。

当硬盘中的资源被加载时,内存中也存储了该资源,当下次改资源被调用时,会优先从memory cache

说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!