前端缓存过程总结

[MirroZhou]

概要

• 缓存过程分析
• 各种不同缓存解析

从源站点到客户端使用，遇到的缓存过程

1 前端代码如果设置了Cookie, 本地存储（ LocalStorage, SessionStorage）则先读取本地存储。否则让浏览器向服务器端发起请求 2 浏览器在发起请求之前，先判断浏览器强缓存是否有效，有效则返回强缓存。否则进行浏览器协议缓存判断 3 协议缓存是否有效，有效则返回浏览器缓存。否则浏览器向服务器发起请求 4 代理服务器或者CDN服务器判断本地缓存是否有效，有效则返回本地缓存，无效则向源服务器发起请求。 5 源服务器若存在缓存且缓存有效则返回缓存内容（数据库缓存等）。

总结：资源请求是从浏览器 —— 代理服务器 —— 源服务器。涉及到的缓存有 浏览器缓存：Cookie、本地缓存、强缓存、协议缓存 代理服务器缓存 源服务器缓存

注：下图有待修正，Cookie不属于浏览器本地存储，但也是浏览器缓存的一种方式。

缓存方式解析

因为本文主要讨论缓存，重点介绍缓存设置方式、是否有效判断、如何使缓存失效。源服务器缓存由于涉及的大多是后台知识，因此本文也不详细讨论

浏览器缓存

• cookie

1. 设置方式： 服务器端通过Set-cookie http 响应头设置或者通过 document.cookie方法
2. 有效期：cookie分为会话cookie和持久cookie。一般情况下没有设置Expries值或者设置了Discard属性，在退出浏览器时则cookie失效（也就是会话cookie）; cookie的Expries属性设置cookie的过期时间, 浏览器会将cookie保存在硬盘上，直到过期（也就是持久cookie）
3. 失效方法： 对于持久化cookie，将 Expries 设置为过去的GMT时间

• localStorage

1. 设置方式：js 通过 localStorage.setItem(key, value) 来设置。
2. 有效期：localStorage不去删除的话会一直有效。
3. 失效方法：localStorage.removeItem(); localStorage.clear()。

• sessionStorage

1. 设置方法：js 通过 sessionStorage.setItem(key, value) 来设置。
2. 有效期：sessionStorage在一次session会话中有效；用户退出浏览器则删除。
3. 失效方法：sessionStorage.removeItem(); sessionStorage.clear()

浏览器强缓存

• 介绍 浏览器会对html、css、图片资源、js等数据进行缓存，以减少带宽请求，提高响应速度。当客户端向服务器请求某资源时，浏览器若发现该文件缓存没有过期，则会返回缓存。此时返回码状态为200。

1. 设置方法：http包头中的Cache-control 标签或者页面中meta属性设置。不设置成no-cache则默认缓存。
2. 有效期： 根据Cache-control 中的 max-age:表示缓存的时间（单位s） 值 或者Exprise：表示过期的值
3. 失效方法：1 修改http包头max-age=0; Exprise=过去的时间；2 在资源url后增加一个随机参数，则会绕过浏览器缓存去请求最新的资源。

浏览器协议缓存

• 介绍 协议缓存与强缓存的相同点是都是返回的浏览器本地缓存。区别是在强缓存判断失效的基础上，浏览器会向服务器验证缓存是否还能使用。若服务器返回还能使用（返回状态码302），则继续使用浏览器缓存。

1. 如何判断协议缓存命中： 使用请求头的 IF-Modified-Since字段或者Last-Modified字段向服务器验证缓存是否有效
2. 失效方法：可以使用url后拼接随机数的方式绕过协议缓存。

代理服务器缓存

1. 设置方法：Cache-control 字段中不设置private标签、no-cache标签就意味着这个是可以公共缓存的（代理服务器可缓存）
2. 有效期：同强缓存
3. 失效方法：不同代理商清除缓存机制不同

注：浏览器刷新方式 这里参考了一些网络资源，总结了浏览器清除缓存方式 1 开发者模式 -Application tab下可清除localStorage 和 cookie 2 F5或者浏览器刷新按钮可绕过强缓存(这点笔者自己试了，使用百度做实验，还是从cache memory读取的缓存？) 3 CTRL + F5 可绕过强缓存和协议缓存