缓存对站点的性能优化起到了很重要的作用, 之前没有这方面的基础, 所以这里做个简单总结

更新

[2019-3-10]

Added

  • 增加参考

[2019-3-25]

Added

  • 补充Memory Cache相关条目
  • 补充Disk Cache相关条目
  • 补充Push Cache条目

[2019-5-20]

Added

  • 补充Last-Modified和If-Modified-Since的联系

[2019-10-14]

Added

记录

作用

减少网络请求带来的性能损耗

缓存位置

Service Worker

为了更深刻的记录SW, 另起炉灶, 在另一篇文章中记录

Memory Cache

  • 存储于内存中
  • 页面关闭释放
  • 一般用于缓存.CSS、.JS文件

Disk Cache

  • 磁盘缓存
  • 长期有效
  • 一般用作图片资源缓存

Push Cache

HTTP/2的特性

网络请求

未命中上述缓存之一, 发起请求

缓存策略

都是通过设置HTTP Header实现

强缓存

在具有缓存期间不需要向服务端请求

  • Expires
    • HTTP/1产物
  • Cache-Control
    • HTTP/1.1产物
  • status code = 200

协商缓存

如果缓存过期, 需要发起请求验证资源是否有更新

  • Last-Modified
    • HTTP/1
    • If-Modified-Since
      • HTTP/1
      • 询问server端在Last-Modified日期后资源是否有更新, 返回新的资源or304
  • ETag
    • HTTP/1.1
    • If-None-Match
      • 将ETag发送到服务器, 询问该资源是否有变动, 将新的资源发送回来
  • status code = 304

Last-Modified和If-Modified-Since

第一次请求某个URL, 在Response Header会记录一个Last-Modified字段, 标识该资源的最后修改时间, 当第二次请求资源时, 在Request Header中会有一个If-Modified-Since字段, 询问该时间段之后, 资源是否有被修改过, 如果未被修改, 则返回304(Not Modified)状态码, 反之在Response Body中返回最新资源.

具体过程

执行某一次请求, 查看HTTP Header是否命中强缓存, 命中则不会发送该请求, 反之携带首次的header信息发送到服务器, 服务器根据请求中的相关信息比对结果是否命中协商缓存, 如果命中, 更新header信息, 反之返回最新的资源.

参考