浏览器缓存技术

浏览器缓存

如果比较粗的说先后顺序应该是这样：

  1. Cache-Control —— 请求服务器之前
  2. Expires —— 请求服务器之前
  3. If-None-Match (Etag) —— 请求服务器
  4. If-Modified-Since (Last-Modified) —— 请求服务器

Request

  • etag：if-none-match
  • last-modified: if-modified-since

如果本地有相关资源的缓存，并且在缓存的时候响应头里面有 etag 或者 last-modified 的情况，这个时候去请求服务器的时候就会是带有条件的 GET 请求(Conditional Validation)。

在请求头里面可能会有两个字段： if-none-match、 if-modified-since，其中 if-none-match 的值是服务器上次返回该资源时响应头里面 etag 的值，if-modified-since 的值是服务器上次返回该资源时响应头里面 last-modified 里的值。

紧接着服务器端就会接收到这个带有条件的 request，然后会根据这两个值去判断缓存的资源是否是最新的。

如果没问题，即资源是最新的情况下就会返回 304，body 为空；不是的话就会返回 200，即目前浏览器端的资源不是最新的，body 里面就是资源体，然后客户端就会用最新返回的资源覆盖掉之前的资源。

Response

虽然说通过这种方式能够减轻服务器的压力，解决一些请求资源时的性能问题。但是细细看来，还是存在一些浪费：每个都要去带上条件请求服务器来看资源是不是最新的，大多情况下是最新的情况下岂不是每次都在做无意义的验证？ 别急，做个约定就好，在 response 里面加上 Cache-Control 和 Expires 即可。

  • cache-control:max-age=96247433
  • expires:Thu, 03 Jan 2019 04:24:16 GMT

如何实现站点缓存技术

  • 保证同一个资源的 URL 稳定。
  • 给 CSS、JS、图片等静态资源加缓存头，强制 HTML 不被缓存。
  • 减少对 Cookie 的依赖。
  • 减少对 HTTPS 的使用。
  • 多使用 GET 的方式来请求服务器资源。

HTML5 Manifest 缓存技术

HTML5的Cache Manifest离线应用特性就能够帮助我们构建离线也能使用的站点，所有的资源都使用浏览器本地缓存，当然前提是要求在联网的情形下使用过一次站点。

Hybrid 离线包技术

Mobile Web 在弱网提速的唯一的办法就是坚决杜绝不必要的（运行时）网络请求，即除了 Json 格式的动态数据和其携带的诸如商品配图之外，不应再有其他网络请求（埋点请求除外）。

  1. 定时程序：紧随页面结构（HTML）变更进行推包。
  2. 增量包：增量包（保性能）和全量包（保安全）必须同时提供。
  3. 服务器推：基于长连接的消息推送 & 客户端静默更新。
  4. 自动化：推包过程必须自动化，解放人工，搭好页面点击“发布”即完成推包。

Ref