关于浏览器缓存

为什么要缓存

因为网站的所有资源都是放在服务器上的,每次访问一个页面的时候,都会通过http请求去请求该页面依赖的静态资源,这个过程会花费很多的时间,造成页面留白等响应过长的问题,导致用户体验不是非常的友好

所以合理的利用浏览器缓存,将第一次请求后得到的一些静态资源合理的存储在本地,然后当用户下次访问的时候,可以直接从本地读取;加快页面的显示。

举个例子:现在我们有一个html然后页面加载一个text.js文件;来看看使用和不使用缓存的区别

  • 没有使用缓存
    图1

  • 使用了缓存
    图2

通过上面两张图可以明显看到,使用缓存后,加载时间从8ms变成了0,效果肉眼可见!

怎么来使用缓存?

通过在服务端设置响应头(header)来告诉浏览器,该资源可以被缓存

控制缓存资源的header:

Expries

  • 于HTTP1.0中添加,值为服务端本地设置的时间+请求时间;然后客户端在该时间之前,可以一直使用该缓存

Cache-Control

  • 于HTTP1.1中添加,和Expries共存时,会覆盖前者;
  • 为了兼容1.0和1.1会和Expries共同存在
  • 值有以下几种:
  • 1.max-age=100—100秒后缓存过期
  • 2.no-cache—每次使用缓存前都要去服务端进行一次验证,以此来检查本地缓存是否过期;
  • 3.no-store—强制不进行缓存
  • 4.public—资源可以被客户端和代理服务器缓存
  • 5.private—资源只能被客户端缓存
  • 更多

Last-Modified/If-Modified-Since

  • Last-Modified为服务端设置,值是这个资源在服务器上的最后修改时间,下次客户端请求该资源时会自动携带该值并通过If-Modified-Since提交给服务端
  • 服务端会对比返回的值和该资源最后修改时间,若没有变化,则返回空响应,告诉客户端可以直接使用缓存
  • 如果返回给服务端的值小于该资源最后修改时间,则返回新的资源

ETag/If-None-Match

  • 前者在服务端设置,后者在客户端请求时通过该首部返回给服务端
  • Etag的值,为当前资源在服务端生成的一个关于该资源文件的一个唯一标识符;前后通过比对该标识符是否一致,来决定是否使用缓存

这几种缓存手段有什么区别呢

Expries、Cache-Control属于 强缓存

  • 意思就是可以直接把资源缓存,然后设置一个过期时间,在这时间之前,就可以一直使用。
  • 这2者区别就是设置值的方式不同,然后各自对应的协议版本不同,为了兼容1.0/1.1 两者都会使用

Last-Modified、ETag属于 协商缓存

  • 意思就是即使缓存了,每次使用缓存前,都必须要去服务端进行一次验证,判断该缓存是否可用
  • 2者的区别:前者记录时间,后者记录根据文件生成的标识符;导致的结果就是,后者会更精确

2种缓存的区别:强缓存优先于协商缓存