关于HTTP缓存验证Last-Modified和Etag的使用

关于资源验证

• 如果给Cache-Control设置no-cache之后，每次浏览器发起对设置了Cache-Control的资源请求的时候
• 都要去到服务器端进行一个资源的验证, 验证如果资源可以使用，那么才会读取本地的缓存

缓存验证流程

• 1 ) 浏览器创建了一个请求, 首先请求到达的地方是在本地缓存, 当然是建立在有Cache-Control头的情况下
  • 如果在本地缓存里查找，如果找到，则直接返回给浏览器渲染页面
  • 这种情况下, 不会经过任何网络的传输，也就是from memory cache的效果
• 2 ) 如果没有找到，就会去网络请求，在网络请求中，如果经过代理服务器(代理缓存)
  • 那么首先会在代理服务器上查找相关缓存信息, 如果找到就会返回给客户端
  • 经过本地缓存，再返回给浏览器渲染页面
• 3 ) 如果在代理服务器上没有找到该缓存信息，那么就直接去源服务器上查找资源
  • 获取了新的内容之后，再逐级向下进行返回和二次缓存
  • 最终返回给浏览器进行页面的渲染

如何进行缓存验证

• 在HTTP里主要有两个验证的HTTP头：Last-Modified, Etag
• Last-Modified: 上次修改时间
  • 也就是说给这个资源设置了上次是什么时间修改的
  • 主要配合If-Modified-Since或If-Unmodified-Since使用
  • 如果请求了一个资源，其返回头信息中有Last-Modified字段，其指定了一个时间
  • 在下一次浏览器发起请求的时候，就会带上这个Last-Modified字段信息
  • 通过If-Modified-Since或If-Unmodified-Since
  • 通常浏览器的实现会选择If-Modified-Since
  • 在请求中将其带到服务器上, 服务器就可以读取头信息中的If-Modified-Since对比该资源上次修改时间
  • 如果时间一样，那么代表资源没有被重新修改过, 服务器就可以告诉浏览器可以直接使用缓存的信息
  • 这就是对比上次修改时间以验证资源能否使用缓存，是否需要更新的过程
• Etag: 是更加严格的一个验证
  • 其验证主要是通过数据签名：对资源内容产生一个唯一的签名
  • 如果资源数据进行了修改, 签名就会变成一个新的，任何修改就会造成两次签名不一样
  • 最典型的方法是对资源内容进行哈希计算, 得到一个唯一值作为签名来标记这个资源
  • 下一次浏览器发起请求的时候，就会带上If-Match或If-Non-Match字段，其值就是服务端返回的Etag值
  • 对比资源签名，判断是否使用缓存

程序示例

• test.html

  <script src="/script.js"></script>
  

• server.js

  const http = require('http');
  const fs = require('fs');
  
  http.