前端性能优化之缓存

浏览器的缓存策略通常分为两种:强缓存和协商缓存

强缓存

强缓存表示在缓存期间不需要请求。可以通过设置两中响应头来实现 Expires和 Cache-control。

Expires: Thu, 23 May 2030 04:33:16 GMT

Expires出现于HTTP1.0。后面跟的是GMT时间,表示该资源会在该时间之后过期。但是会受到本地时间影响,自行修改时间之后会导致缓存失效。

Cache-Control: max-age=1000

Cache-Control出现于HTTP1.1,优先级高于Expires。表示资源在1000秒 后过期

协商缓存

协商缓存,顾名思义,需要进行协商,也就是需要客户端发起请求。如果缓存有效返回304

Last-ModifiedIf-Modified-Since

Last-Modified表示本地文件最后修改日期,If-Modified-Since会将 Last-Modified的值发送给服务器,询问服务器在该日期后资源是否有更新,有更新的话就会将新的资源发送回来。如果本地打开缓存文件,也会造成Last-Modified被修改

ETagIf-None-Match

ETag类似于文件指纹,If-None-Match会将当前ETag发送给服务器,询问该资源ETag是否有变动,有变动的话就将新的资源发送回来。并且ETag优先级比Last-Modified高

如何选择缓存策略

一般情况下根据业务 使用强缓存配合协商缓存就足够了,特殊情况下选择特殊的策略

  • 如果某些资源不需要缓存,使用Cache-Control: no-store,表示该资源不需要缓存(缓存禁用,客户端不会发起请求,而no-cache表示的是向服务器验证是否能使用本地缓存)
  • 对于频繁变动的资源,可以使用Cache-Control: no-cache 并ETag使用,表示该资源已被缓存,但是每次都会发送请求询问资源是否更新
  • 对于代码文件,通常使用 Cache-Control: max-age=31536000 并配合策略缓存使用,然后对文件进行指纹处理,一旦文件名变动就会立即下载新的文件

猜你喜欢

转载自www.cnblogs.com/kenanyah/p/12984032.html