-web缓存
-- http缓存
-- 强制缓存
-- Expires(废弃)
-- Cache-Control
-- 协商缓存
-- last-modified
-- Etag
-- 浏览器缓存
-- localStorage
-- sessionStorage
-- cookie
-------------------------------------------------------------------
-http缓存的优点:
- 减少不必要的网络传输,节约带宽
- 更快的加载速度
- 减载--减少服务器负载,避免服务器过载
-http缓存的缺点:
- 占内存
-----------------------------------------------------------------
-强制缓存--Expires
Expries字段的作用是,设定一个强缓存时间,在这个时间范围内,则从内存(磁盘)中读取缓存返回
例:设置响应头Expires: new Date("2022-09-01 18:00:00")
那么该资源在2022-09-01 18:00:00"之前都会从本地磁盘中读取,不会去服务器请求
Expires已经废弃了,主要原因还是这个强缓存机制是通过本地时间戳与设置过期时间戳相对比,从而判断是否需要从服务器中请求。
这样太过于依赖本地时间,要是本地时间不准不就炸裂。所以我们设置强缓存一般会使用Cache-Control
-强缓存--Cache-Control
Cache-Control是通过设置一个需要缓存的时间来定义强缓存
例: Cache-Control: "max-age: 10"
这就给该资源设置了10秒的强缓存时间(cache-control设置的时间单位是秒)
cache-control有六个属性设置,分别为:
- max-age 在客户端(浏览器)缓存的时长
- s-maxage 在代理服务器缓存的时长
- no-cache 强制使用协商缓存
- no-store 不使用任何缓存
- public 既可以在代理服务器缓存也可以在客户端(浏览器)缓存
- private 只能在客户端(浏览器)缓存
多个一起可以用逗号隔开
例: Cache-Control: "max-age: 1000, s-maxage: 200, public"
注: no-cache与no-store互斥,public与private互斥,设置s-maxage就必须要设置public
---------------------------------------------------------------
-协商缓存---last-modified
不揍流程为:
- 在服务器中获取文件修改的时间
- 将获取的文件修改时间赋值给响应头last-modified
- 响应头Cache-Control: no-cache
- 当客户端读取到last-modified,会在下次请求头中自动携带字段为If-Modified-Since,其值就是上次last-modified的时间值
- 之后每次对该资源的请求都会携带if-modified-since字段,服务端需要拿到这个字段值及文件修改的时间与之相对比,相同返回缓存资源反之返回新的资源
last-modified协商缓存也有两个漏洞:
- 因为是根据文件修改时间来判断的,所以在文件内容本身不修改的情况下,依然有可能更新文件修改时间,比如修改完文件名后又修改回来,这样缓存也就失效了
- 因为文件修改时间记录的最小单位是秒,如果文件修改的时间极短,在几百毫秒内完成修改的话,文件时间就不会改变,即请求不会返回新资源,而是返回缓存数据
为了解决上述问题,http1.1新增Etag(Entity 实体标签)
-协商缓存---Etag
Etag就是将原先协商缓存的比较时间戳的形式修改成了比较文件指纹
补充: 文件指纹是根据文件内容计算出的唯一哈希值。文件内容一旦改变文件指纹也会改变;
步骤流程为(与last-modified相似):
- 在服务器中获取文件并计算文件指纹
- 将文件指纹赋值给响应头Etag返回给客户端
- 响应头Cache-Control: no-cache
- 再次请求该资源,客户端自动从缓存中读取上一次服务器返回的Etag,并赋给请求头的If-None-Match字段,让上一次的文件指纹跟随请求一起返回服务器
- 服务器拿到If-None-Match的值,并读取目标资源生成文件指纹,与之对比,相同直接返回304状态码和一个空的响应体并return,不同就将新的文件指纹赋给Etag返回客户端
Etag需要大量的计算开销来生成文件指纹,可以设置强验证和弱验证;
--------------------------------------------------------------------------------------------------------
浏览器缓存