乐趣区

关于缓存:浏览器缓存

jiezi

浏览器缓存

  • 浏览器解决网页的形式
  • 走到协商缓存会返回 304
  • 走到强缓存会返回 200

  • 正当应用浏览器缓存
  • 页面连贯的申请毋庸做长时间缓存
  • 敏感数据像订单等不宜做缓存
  • 动态资源局部，通常会设定一个较长的缓存工夫
  • 冷热数据拆散，缩小申请量
  • 不要随便批改文件，倡议应用 ?version=** 调用多版本
  • 不倡议应用 ETag, 尤其是分布式
  • header 字段输入形式
  • html 输入形式 
<meta http-equiv="Cache-Control" content="max-age=7200">
  1. php 输入形式 
<?php
header('Cache-Control:max-age=7200');
  • 强缓存阶段的 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」执行流程完全一致。

退出移动版