浏览器缓存

一、什么是浏览器缓存?

常见的缓存方式分为三类:服务器缓存、CDN缓存、客户端缓存
浏览器缓存属于客户端缓存
浏览器缓存主要分为强缓存和协商缓存两种:

  • 强缓存:第一次加载资源时将资源缓存到本地。再次请求时,直接使用本次缓存的资源(无需再次与服务端通信)
  • 协商缓存:第一次加载资源时将资源缓存到本地。再次请求时,将资源的相关信息发送给服务器,由服务器判断浏览器能否使用本地缓存。若可以,则直接使用本地缓存;若不可以,则再次请求服务器获取最新资源

二、为什么有浏览器缓存?

  1. 减少冗余的数据传输
  2. 减少对通信资源的消耗

三、如何设置浏览器缓存?

浏览器缓存主要依靠HTTP请求的header字段来设置,其中涉及到缓存的头部字段有:expires、cache-control、Last-Modified、If-Modified-Since、Etag、If-None-Match

3.1 强缓存

  • 和强缓存相关的header字段有:expires、cache-control: max-age=number
  • expires 值为一个时间字符串,若获取资源的时间在 expires 之前,则本地缓存有效,否则,则过期
  • cache-control: max-age=number number 代表有效期。资源第一次的请求时间和这个有效期时间一起计算出资源过期时间。若获取资源的时间在过期时间之前,则本地缓存有效,否则,则过期

3.2 协商缓存

  • Last-Modified/If-Modified-Since:这种方式的原理是:当第一次请求资源时,服务器出了返回资源,还返回一个header字段,值为这个资源在服务器上的最后修改时间。再次请求数据时,浏览器会在header字段中带上这个值,由服务器与当前最新的 最后修改时间 做比对。若一致,则返回 304 Not Modified,浏览器直接使用本地缓存
  • Etag/If-None-Match:这种方式的原理是:由服务器为每个资源生成唯一标识字符串,当资源有变化时,这个字符串会改变。通过判断这个唯一标识是否一致来确定本地缓存是否能够使用。若一致,则返回304 Not Modified,浏览器直接使用本地缓存
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容