页面优化---利用浏览器缓存

  对于 web 应用来说,缓存是提升页面性能同时减少服务器压力的利器;

浏览器缓存类型:强缓存、协商缓存

  强缓存

    强缓存不会向服务器发送请求,直接从缓存中读取资源,在 chrome 控制台的 network 选项中可以看到该请求返回 200 的状态码,并且 size 显示 from disk cache 或者 from memory cache;

    强缓存涉及到的相关的 header:expires、cache-control;

      expires:response header 里的过期时间,浏览器再次加载资源时,如果在这个过期时间内,则命中强缓存;它的值是一个绝对时间的 GMT 格式的时间字符串,比如: EXpires: Thu,21 Jan 2018 23:23:23 GMT;

      Cache-Control:这是一个相对时间,在配置缓存的时候,以秒为单位,用数值表示;当值设置为 max-age=300 的时候,则代表在这个请求正确返回时间(浏览器也会记录下来)的 5 分钟内再次加载资源,就会命中强缓存;比如:Cache-Control:max-age=300

      其实,expires 和 cache-control 的差别并不是很大,区别就在于 expires 是 http1.0 的产物,cache-control 是 http1.1 的产物,两者同时存在的话,cache-control 的优先级会高于 expires ;在某些不支持 http1.1 的环境,expires 就会被用到;所以 expires 其实是过时了的,现阶段它的存在只是一种兼容的写法;强缓存判断是否缓存的依据来自于是否超出某个时间或者某个时间段,而不关心服务器端文件是否已经更新,这可能会导致加载文件不是服务器端最新的内容;

  协商缓存

    协商缓存向服务器发送请求,服务器会根据这个请求的 request header 的一些参数来判断是否命中协商缓存,如果命中,则返回304 状态码并带上新的 response header 通知浏览器从缓存中读取资源;另外协商缓存需要与 cache-control 共同使用;

    协商缓存设计到的相关的 header:Last-Modified 和 If-Modified-Since、ETag 和 If-None-Match;

      Last-Modified 和 If-Modified-Since:当第一次请求资源时,服务器将资源传递给客户端时,会将资源最后更改的时间以 Last-Modified:GMT 的形式加在实体首部上一起返回给客户端;客户端会为资源标记上改信息,下次再次请求时,会把该信息附带在请求报文中一并带给服务器去做检查,若传递的时间值与服务器上该资源最终修改时间是一致的,则说明该资源没有被修改过,直接返回 304 状态码,内容为空,这样就节省了传输数据量;如果两个时间不一致,则服务器会发回该资源状态并返回 200 状态码,和第一次请求时类似;这样保证不向客户端重复发出资源,也保证当服务器有变化时,客户端能够得到最新的资源;一个 304 响应比一个静态资源通常小的多,这样就节省了网络带宽;但是 last-modified 存在一些缺点:1)、某些服务端不能获取精确的修改时间;2)、文件修改时间改了,但文件内容却没有变;

      ETag 和 If-None-Match:ETag 是上一次加载资源时,服务器返回的 response header,是对该资源的一种唯一标识,只要资源有变换,ETag 就会重新生成;浏览器在下一次加载资源向服务器发送请求时,会将上一次返回的 ETag 值放到 request header 里的 If-None-Match 里,服务器只需要比较客户端传来的 If-None-Match 跟自己服务器上该资源的 ETag 是否一致,就能很好的判断资源相对客户端而言是否被修改过了;如果服务器发现 ETag 匹配不上,那么直接以常规 GET 200 回包形式将新的资源发给客户端,如果 ETag 是一致的,则直接返回 304 告诉客户端直接使用本地缓存即可;

      想比较而言,在精确度上 ETag 要优先于 Last-Modified;在性能上,ETag 要逊色于 Last-Modified;在优先级上,服务器效验优先考虑 ETag;

缓存的机制

  强制缓存优先于协商缓存进行,若强制缓存生效则直接使用缓存,若不生效则进行协商缓存,协商缓存由服务器决定是否使用缓存,若协商缓存失效,那么代表该请求的缓存失效,重新获取请求结果,再存入浏览器缓存中,生效则返回 304 ,继续使用缓存;

  用户行为对浏览器缓存的影响:

    1、地址栏访问,链接跳转是正常用户行为,将会触发浏览器缓存机制;

    2、F5 刷新,浏览器会设置 max-age = 0;跳过强缓存判断,会进行协商缓存;

    3、ctrl + F5 刷新,跳过强缓存和协商缓存,直接从服务器拉取资源

原文地址:https://www.cnblogs.com/mufc/p/11288520.html