强缓存与协商缓存的区别及缓存优化

| |

前言

url请求过程中，浏览器会根据缓存机制保存请求的资源。当浏览器再次请求相同的url时，会根据header标识判断是否使用缓存。
强缓存是浏览器本地缓存，根据缓存的cache-control和expires判断资源是否过期，未过期则不经过服务器请求，返回200。
协商缓存根据Etag和Last-modified判断是否有数据更新，是则读取浏览器缓存，更新请求header并返回304；否则经过服务器请求，返回200，更新数据和请求header。

第一次请求：

Image.png

第二次请求：

Image2.png

强缓存（本地缓存）

1、特点

  • 不发送请求到服务器
  • 返回 200

  • from cache

    • from memory cache
      • 内存中读取
      • 关闭页面随内存释放
      • js、font、img
    • from disk cache
      • 硬盘中读取
      • 不会随页面关闭而释放
      • css（加载一次 disk -> memory）

2、header字段

  • Cache-control : max-age=number（优先）http1.1

    • no-cache 不是用本地缓存
    • no-store 禁止缓存
    • public 可被所有用户缓存：终端用户的浏览器、CDN等中间代理服务器
    • private 终端用户的浏览器

  • Expires : GMT http1.0

    • GMT > 发送请求的时间

协商缓存（由服务器决定）

1、特点

  • 返回 304，not modified
  • 通过服务器告知缓存可用
  • 更新header信息，不更新返回数据
    • header报文大小

2、header字段

  • Etag/If-None-Match：string（优先） http1.1
    • 资源唯一标识符，资源变化会更新
    • 优点：更准确的控制缓存
      • 精确到秒以下的粒度
      • 内容不变，修改时间变化的情况下使用缓存
  • Last-modified/If-Modified-Since: GMT
    • GMT 最后修改时间 == 资源在服务器最后修改时间
      • == 304 not modified，不返回资源内容，response header更新
      • != 200，重新加载资源，header Last-modified更新

缓存优化

1、三级缓存原理

  1. 内存 ↓ （强缓存）
  2. 硬盘 ↓ （强缓存）
  3. 网络请求 ↓
    • 200 请求
    • 304 （协议缓存，只更新header）
  4. 缓存到硬盘和内存

2、缓存优化思路

  1. 200 -> 304 -> 本地缓存
  2. 更新url版本号，使浏览器重新请求资源
  3. 文件级别的精确缓存控制
    • 文件内容变化才变更url
    • 将url改成带 文件摘要信息
  4. 静态资源CDN节点部署
    • 性能优化：静态资源和动态网页分集群部署，静态资源部署到CDN节点
    • 覆盖式发布：部署页面和部署资源的先后顺序：资源 -> 页面
  5. 非覆盖式发布
    • 用文件摘要信息 对资源文件进行重命名，不覆盖原有的资源文件
    • 全量部署静态资源，再灰度部署页面

3、静态资源缓存控制方案

  1. 配置超长时间的本地缓存：节省带宽
  2. 提高性能采用内容摘要作为缓存更新依据：精确的缓存控制
  3. 静态资源CDN部署： 优化网络请求
  4. 更新资源发布路径实现非覆盖式发布： 平滑升级

ps：from 大公司的缓存优化

4、实现工具

rails assets pipeline
F.I.S F.I.S发布项目