浏览器缓存策略

浏览器缓存策略

为什么需要浏览器缓存

  1. 客户端(浏览器)和服务器通过http协议建立连接需要消耗时间
  2. 服务器和客户端(浏览器)大的数据传输也需要消耗较多时间

如何重用以前传输的数据可以来提升访问性能???

基本概念: 请求本地资源比远程资源更快

你会怎么设计浏览器缓存

设计逻辑:

  1. 浏览器有缓存且有效, 直接用浏览器缓存(强制缓存)
  2. 浏览器有缓存但失效, 去远程服务器看下资源是否真的失效. 没失效就告诉浏览器直接使用缓存. 失效服务器就返回最新的资源.

浏览器缓存实现

如下图:

图片

强制缓存

页面使用浏览器缓存数据资源

是否使用浏览器缓存数据

1
2
1. cache-control: max-age=300   // 缓存时长300秒
2. Expires: Wed, 01 Feb 2023 03:41:03 GMT  // 缓存有效期, 具体的时间

cache-control优先级大于Expires
cache-control属于http1.1版本的响应头
Expires属于http1.0版本的响应头

协商缓存

强制缓存失效时, 通过服务器对比看缓存是否失效. 未失效返回304, 依然使用浏览器缓存. 失效直接返回服务器最新资源.

是否使用浏览器缓存数据

1
2
1. Etag / If-None-Match  // Etag是否更新, 每次文件更新都会产生一个唯一hash值
2. Last-Modified / If-Modified-Since  // 文件上次更新日期

Etag的优先级大于Last-Modified