前端页面缓存逻辑

参考一文读懂前端缓存 - 小蘑菇小哥的文章 - 知乎，推荐大家去知乎看原文写的很好很透彻，这篇文章仅作为札记，工作之用，原理还需要大家自行探索。

缓存三剑客

说到网页缓存就不得不提 meta 三大属性：Expires / Pragma / Cache-control

Expires

w3-Expires

• 含义
  提供了将指定日期/时间视为过期的日期/时间，超过则重新请求，（绝对时间，指定这一时间相当复杂）
• 示例
  Expires: Thu, 01 Dec 1994 16:00:00 GMT

Pragma

w3-Pragma

• 含义

  • 作为 HTTP / 1.0 协议下的 Expires 不缓存的补充（个人理解，有不足之处，请不吝赐教）。
  • 仅有一个有效值：no-cache
  • HTTP / 1.1 缓存应将“ Pragma：no-cache”视为客户端已发送“ Cache-Control：no-cache”。HTTP中不会定义新的 Pragma 指令。

• 示例
  Pragma: no-cache

Cache-control

w3-Cache-control

• 含义

  • HTTP / 1.1 协议下的缓存控制指令，优先级高于 Expires

• 可选值

  • no-cache
  • no-store
  • max-age [ “=” delta-seconds ]
  • max-stale [ “=” delta-seconds ]
  • min-fresh = delta-seconds
  • no-transform
  • only-if-cached
  • cache-extension

• 示例
  Cache-control: no-cache

实际使用指南

因为篇幅有限，大量理论知识请参照原文，这里只写一写我的实践：

<!-- (HTTP/1.0)缓存到期时间，是一个绝对的时间(当前时间+缓存时间) -->
<meta http-equiv="Expires" content="0">
<!-- (HTTP/1.0) -->
<meta http-equiv="Pragma" content="no-cache" />
<!-- (HTTP/1.1)资源缓存的最大有效时间 -->
<meta http-equiv="Cache-Control" content="no-cache">

• Cache-control 的优先级高于 Expires，为了兼容 HTTP/1.0 和 HTTP/1.1，实际项目中两个字段我们都会设置。

参考文献

[1] 小蘑菇小哥 一文读懂前端缓存-知乎
[2] w3.org Expires
[3] w3.org Cache-control