浏览器缓存

削个椰子皮给个梨

浏览器缓存

  • 浏览器处理网页的方式
  • 走到协商缓存会返回 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」执行流程完全一致。

阅读 142

生活不止眼前的苟且,你不努力,还有未来的苟且……

42 声望
4 粉丝
0 条评论
你知道吗?

生活不止眼前的苟且,你不努力,还有未来的苟且……

42 声望
4 粉丝
宣传栏