6
B584bbc71b
其他quakex • 于 2018-08-08发布 • 83次阅读 • (原文: gitissue.com)

策略

不缓存

expires: 0
pragma: no-cache
cache-control: no-store, no-cache, must-revalidate, proxy-revalidate
  • no-store: 告诉浏览器、缓存服务器不要保存副本,每次都要去向源服务器请求新的资源。
  • no-cache:告诉浏览器、缓存服务器,不管本地副本是否过期,使用资源副本前,一定要到源服务器进行副本有效性校验。
  • must-revalidate:告诉浏览器、缓存服务器,本地副本过期前,可以使用本地副本;本地副本一旦过期,必须去源服务器进行有效性校验。
  • proxy-revalidate:告诉缓存服务器不要保存副本。

再加上兼容 HTTP/1.0 的 expires 和 pragma,即禁止一切缓存,请求每次都要发往源服务器。

长 max-age + hash

Cache-Control: max-age=31536000

将 Cache-Control 设定的很长,即在 Cache-Control 没有过期的情况下将直接从浏览器中取出缓存(from memory cache 或 from disk cache),但是这样也彻底限制了资源更新的可能。

通过给资源的 URL 添加一个“指纹”,可以是版本号,hash 值等

script src="/script-f93bca2c.js">script>
link rel="stylesheet" href="/styles-a837cb1e.css">
img src="/cats-0e9a2ef4.jpg" alt="…">

通过 HTML 的更新来控制对应资源是否更新,这样做的好处是在 HTML 没更新的时候直接从浏览器中取缓存,有效避免 304,进一步减小服务器的压力;HTML 更新后也会更新资源文件的文件名,URI 变了浏览器自然会去向源服务器请求新的资源。

知乎 & 掘金 & GitHub

我们通过分析知乎和掘金的的 HTTP 缓存实践来看下这两个网站是如何进行缓存的:

知乎

  • *.html

知乎的主页是由服务端动态生成的,所以采用完全不缓存的策略。

  • *.js, *.css

.js 和 .css 采用的都是长 max-age + hash 的策略,由上面的 HTML 来控制是否更新。

  • 静态资源

图片等同样适用 max-age + hash 的策略。

  • Ajax

对于涉及到用户个人的信息,要特别在 cache-control 中指出 private 来防止缓存服务器缓存,然后再禁止掉所有本地缓存。

掘金

  • *.html

掘金的 HTML 只在 Cache-Control 中写了 private,禁止缓存服务器缓存,但是也没有指定 max-age,所以每次还是会去请求源服务器。

不过根据 MSDN 中描述的,Cache-Control 默认值就是 private,所以不写应该也没问题。

  • *.js, *.css

对于加 hash 后缀的文件,与知乎的策略近似,这里多了一个 public,意欲何为?

  • 静态资源

资源文件有 hash,所以采用长 max-age + hash 的策略,又多了个 public?

  • Ajax

采用长 max-age + hash 的策略并且不允许缓存服务器缓存。

GitHub

  • *.html

采用 no-cache,这样可以利用缓存服务器,缓存服务器在发回备份前会先向源服务器确认缓存是否可用,如果可用则返回给浏览器备份,否则要再向源服务器发起请求。

  • *.js, *.css

同掘金

  • 静态资源

不同于前两者的资源 URI,github 的资源 URI 采用的是 {id}?s={size}&v={version} 的格式,没有 hash 的加持,就要保证资源在改变时及时更新,

github 是默认给缓存五分钟,五分钟之内直接从本地浏览器缓存中拿,如果超过了五分钟则去比较 Etag,Last-Modified 和 Expires,如果改变了就向源服务器 200 一个新的,如果没改变就会返回一个 304。

  • Ajax

同 html。

总结

HTTP 缓存不存在银弹,只有根据当前业务特点还有后端资源的配置寻求最适合的配置。

参考

暂无回复。
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册
Top