浏览器缓存看这一篇就够了( 二 )

  •   proxy_cache_lock_timeout  5s;  
  •   proxy_cache_use_stale     updating error timeout invalid_header http_500 http_502;  
  •   expires                   1y;  
  • }  
  • 浏览器的缓存存放在哪里 , 如何在浏览器中判断强制缓存是否生效?这就是下面我们要讲到的from disk cache和from memory cache 。
    2.2、from disk cache和from memory cache
    细心地同学在开发的时候应该注意到了Chrome的网络请求的Size会出现三种情况from disk cache(磁盘缓存)、from memory cache(内存缓存)、以及资源大小数值 。
    状态类型说明 200form memory cache不请求网络资源 , 资源在内存当中 , 一般脚本、字体、图片会存在内存当中200form disk ceche不请求网络资源 , 在磁盘当中 , 一般非脚本会存在内存当中 , 如css等200资源大小数值从服务器下载最新资源304报文大小请求服务端发现资源没有更新 , 使用本地资源 浏览器读取缓存的顺序为memory –> disk 。
    以访问https://github.com/xiangxingchen/blog为例
    我们第一次访问时https://github.com/xiangxingchen/blog
    浏览器缓存看这一篇就够了

    文章插图
    关闭标签页 , 再此打开https://github.com/xiangxingchen/blog时
    浏览器缓存看这一篇就够了

    文章插图
    F5刷新时
    浏览器缓存看这一篇就够了

    文章插图
    简单的对比一下
    浏览器缓存看这一篇就够了

    文章插图
    3、协商缓存
    协商缓存就是强制缓存失效后 , 浏览器携带缓存标识向服务器发起请求 , 由服务器根据缓存标识决定是否使用缓存的过程 , 主要有以下两种情况:
    • 协商缓存生效 , 返回304和Not Modified

    浏览器缓存看这一篇就够了

    文章插图
    • 协商缓存失效 , 返回200和请求结果

    浏览器缓存看这一篇就够了

    文章插图
    3.1、Last-Modified和If-Modified-Since
    浏览器首先发送一个请求 , 让服务端在response header中返回请求的资源上次更新时间 , 就是last-modified , 浏览器会缓存下这个时间 。
    然后浏览器再下次请求中 , request header中带上if-modified-since:[保存的last-modified的值] 。根据浏览器发送的修改时间和服务端的修改时间进行比对 , 一致的话代表资源没有改变 , 服务端返回正文为空的响应 , 让浏览器中缓存中读取资源 , 这就大大减小了请求的消耗 。
    由于last-modified依赖的是保存的绝对时间 , 还是会出现误差的情况:
    保存的时间是以秒为单位的 , 1秒内多次修改是无法捕捉到的;
    各机器读取到的时间不一致 , 就有出现误差的可能性 。为了改善这个问题 , 提出了使用etag 。
    3.2、ETag和If-None-Match
    etag是http协议提供的若干机制中的一种Web缓存验证机制 , 并且允许客户端进行缓存协商 。生成etag常用的方法包括对资源内容使用抗碰撞散列函数 , 使用最近修改的时间戳的哈希值 , 甚至只是一个版本号 。和last-modified一样.
    浏览器会先发送一个请求得到etag的值 , 然后再下一次请求在request header中带上if-none-match:[保存的etag的值] 。
    通过发送的etag的值和服务端重新生成的etag的值进行比对 , 如果一致代表资源没有改变 , 服务端返回正文为空的响应 , 告诉浏览器从缓存中读取资源 。
    etag能够解决last-modified的一些缺点 , 但是etag每次服务端生成都需要进行读写操作 , 而last-modified只需要读取操作 , 从这方面来看 , etag的消耗是更大的 。
    二者对比
    • 精确度上:Etag要优于Last-Modified 。
    • 优先级上:服务器校验优先考虑Etag 。
    • 性能上:Etag要逊于Last-Modified
    4、用户行为对浏览器缓存的影响
    1. 打开网页 , 地址栏输入地址: 查找 disk cache 中是否有匹配 。如有则使用;如没有则发送网络请求 。
    2. 普通刷新 (F5):因为 TAB 并没有关闭 , 因此 memory cache 是可用的 , 会被优先使用(如果匹配的话) 。其次才是 disk cache 。


      推荐阅读