# HTTP 缓存简介 缓存作为前端性能优化的有效方式之一，对于前端开发工程师来说，相对熟悉的就是 HTTP 缓存。 ### 一、什么是 HTTP 缓存？ HTTP 缓存指的是：当客户端向服务器请求资源时，会先抵达浏览器缓存，如果浏览器缓存中有“要请求的资源”的副本，则直接从浏览器缓存中获取，而不是从目标服务器中获取这个资源。 > 虽然 HTTP 缓存不是必须的，但重用缓存的资源通常是必要的。然而常见的 HTTP 缓存只能存储 GET 响应，对于其他类型的响应则无能为力。 ### 二、为什么要用 HTTP 缓存？ * 减少冗余的数据传输 * 缓解服务器压力，提高网站性能 * 加快了客户端加载网页及资源的速度 ### 三、哪些资源可以被缓存？ 一般包括 html 页面和其他静态资源（js、img、css等） ### 四、HTTP 缓存分类 1. 强缓存 * Expires（HTTP 1.0） * Response Headers 中 * 控制缓存过期时间 * 已被 Cache-Control 代替 * 值为服务器端的绝对时间 * Cache-Control（HTTP 1.1） * Response Headers 中 * 控制强制缓存的逻辑 * 例如 Cache-Control: max-age=31536000（单位是秒） * 值 * max-age 缓存过期时间（相对时间） * no-cache 不用本地强制缓存，需要进行协商缓存，发送请求到服务器确认是否使用缓存。 * no-store 不用本地强制缓存，也不用服务端缓存措施，每一次都要重新请求数据。 * private 只能被终端用户缓存，比如：电脑 浏览器 手机等 * public 允许被任何中间人（比如中间代理、CDN等）缓存 1. 协商缓存（对比缓存） * 服务器端缓存策略（服务端判断资源能不能用缓存的内容） * 服务器判断缓存资源是否和服务端资源一样（一致返回 304，否则返回 200 和最新的资源） * 在 Response Headers 中，有两种 * Last-Modified 资源的最后修改时间（只能精确到秒级） * Etag 资源的唯一标示（优先使用） ### 五、缓存执行流程 浏览器在加载资源时，会先根据本地缓存资源的 header（expires 和 cahe-control） 中的信息判断是否命中强缓存，如果命中则直接使用缓存中的资源不会再向服务器发送请求。 当强缓存没有命中的时候，浏览器会发送一个请求到服务器，服务器根据 header（If-Modified-Since 和 If-None-Match）中的信息来判断是否命中缓存。如果命中，则返回 304 ，告诉浏览器资源未更新，可使用本地的缓存。  ### 六、刷新操作方式，对缓存的影响 * 三种刷新操作 * 正常操作：地址栏输入 url，跳转链接，前进后退等 * 手动刷新：F5，点击刷新按钮，右击菜单刷新 * 强制刷新：ctrl + F5（Mac：shift + command + r） * 不同刷新操作，不同的缓存策略 * 正常操作：强制缓存有效，协商缓存有效 * 手动刷新：强制缓存无效，协商缓存有效 * 强制刷新：强制缓存失效，协商缓存失效