http缓存机制

前言

本文是阅读文章所做笔记。意在加深记忆也便于日后查找

强缓存和协商缓存

http的缓存机制可以分为两种类型：

• 强缓存：浏览器判断本地缓存未过期，就直接使用，无需发起http请求
• 协商缓存： 浏览器判断本地缓存过期，发送http请求，服务器返回304告诉浏览器文件未改变，浏览器继续使用本地缓存

缓存头部

如何区分缓存类型呢？主要根据http头部字段
属于强缓存控制：

• http1.0: Pragma/Expires
• http1.1: Cache-Control/Max-Age
  ps: Max-Age不是一个头部，而是Cache-Control的值

属于协商缓存控制：

• http1.0: If-Modified-Since/Last-Modified
• http1.1: If-None-Match/E-tag

http1.0和http1.1缓存头部控制的区别

在http1.0中：

• Pragma: 严格说，他不属于专门控制缓存的头部，但是当其值为no-cache时可以让本地强缓存失效
• Expires: 在服务端配置，用于强缓存。用来控制在规定时间之前，浏览器不需要在发出请求，直接使用本地缓存。切Expires是服务端时间
• If-Modified-Since/Last-Modified: 这两个是成对出现。属于协商缓存。其中浏览器端头部为If-Modified-Since,服务器端为Last-Modified。在发送请求时，如果If-Modified-Since和Last-Modified匹配，那么表示服务器资源为变化，服务器不会返回当前资源。而是返回头部，告知浏览器使用本地缓存。Last-Modified是指文件的最后修改时间。只能精确到1s以内。

在http1.1中：

• Cache-Control：缓存控制的头部。有no-cache, max-age,no-store等值。
• Max-Age：服务器端配置，用于强缓存，例如Cache-Control=max-age=3600在3600秒内，浏览器无需再次发出请求直接使用本地缓存。他的值是绝对时间，由浏览器自己计算。
• If-None-Match/E-tag： 这个是成对出现的。属于协商缓存。其中浏览器端头部为If-None-Match,服务器端为E-tag。当浏览器发出请求后两者匹配，则表示服务器端资源未改变，服务器不会返回资源本身，返回头部，浏览器使用本地缓存。和Last-Modified相比。E-tag更精确。没有1s的误差。

Max-Age 和 Expires 区别

Expires 使用的服务器时间。当服务器时间和浏览器时间不同步时，可能会发生缓存无效或一直无法过期的bug。
而E-tag 使用的浏览器时间。就不会存在上述问题。

E-tag 和 Last-Modified 区别

Last-Modified 表示的是文件的最后修改时间，有一个精确1s的缺陷，如果服务端的文件周期性改变，会导致缓存失效。
而E-tag是一种指纹机制。只有文件发生改变才会变化。不存在1s的缺陷。

缓存关系图

缓存关系图

本文参考:
从输入URL到页面加载的过程？如何由一道题完善自己的前端知识体系