浏览器缓存

浏览器缓存

• 浏览器处理网页的方式

1. 走到协商缓存会返回 304
2. 走到强缓存会返回 200

浏览器缓存执行流程

• 合理使用浏览器缓存

1. 页面连接的请求无须做长时间缓存
2. 敏感数据像订单等不宜做缓存
3. 静态资源部分，通常会设定一个较长的缓存时间
4. 冷热数据分离，减少请求量
5. 不要随意修改文件，建议使用 ?version=** 调用多版本
6. 不建议使用 ETag,尤其是分布式

• header 字段输出方式

1. html 输出方式

2. php 输出方式

• 强缓存阶段的 header 字段

启用强缓存的状态为 200 (from disk cache)

执行到强缓存的时机为：

graph TD
A[浏览器] --> B[是否有缓存]
B --> C{Yes or No?}
C --> |yes| D[是否过期]
D --> |no| E[就使用缓存中的内容]

• Pragma (HTTP 1.0)
• Expires (HTTP 1.0) （设定的是一个精确的时间）
• Cache-control (HTTP 1.1)
  • max-age （缓存最大的秒数）
  • Public \ private （当设置为 public 且采用 https 协议的时候，也会转换成 private）
  • no-cache \ no-store （不允许存放在用户的硬盘里） \ must-revalidate （必须请求认证）

如果这三个参数同时出现的话：那么优先顺序为，1、Cache-control 2、Pragma 3、Expires

• 协商缓存阶段的 header 字段

启用协商缓存的状态为 304 Not Modified

1. Last-Modified：末次更新标记，文件最后一次更新的具体时间（下行 response）
2. If-Modified-Since ：资源上次的修改时间（上行 request）
3. E-Tag ： 实体与标记（下行）
4. If-None-Match ：资源内容标识（上行）

协商缓存的执行流程如下：

graph TD
A[浏览器第一次请求服务器] --> B[服务器 Response Headers 携带 last-modified: Mon, 21 Oct 2019 00:44:35 GMT 返回给浏览器]
B --> C[浏览器第二次请求服务器 Request Headers 携带 If-Modified-Since: Mon, 21 Oct 2019 00:44:35 GMT]
C --> D{If-Modified-Since 和文件的 Last-Modified 作比较}
D --> |yes| E[文件的最后修改时间没有变化]
E --> F[Status Code: 304 Not Modified]

因为 Last-Modified 和 If-Modified-Since 字段的最小颗粒度为秒 （Mon, 21 Oct 2019 00:44:35 GMT） ，那么就会出现一个问题：当某个文件在 1s 中更改 n 次时，服务器就完全不知道是否需要执行强制缓存。这就引入了 E-Tag 的概念。当文件只要修改时，E-Tag 就会重新生成一个字符串，之后浏览器第二次请求的时候，重新生成的字符串被 If-None-Match 字段携带。「E-Tag」、「If-None-Match」 和 「Last-Modified」、「If-Modified-Since」执行流程完全一致。