强缓存&协商缓存

目录

前言：

一、强缓存

二、协商缓存

---

前言：

强缓存&协商缓存是提高页面加载效率、降低服务器负担的网络层面的性能优化手段之一。通过读取计算机本地缓存的内容加快页面资源加载，降低服务器负担。

Cache-Control:

在HTTP/1.1中，Cache-Control是最重要的规则，主要用于控制网页缓存，主要取值为：

        public：所有内容都将被缓存（客户端和代理服务器都可缓存）

        private：所有内容只有客户端可以缓存，Cache-Control的默认取值

        no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定（不进行强          缓存，直接协商缓存）

        no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存

        max-age=xxx (xxx is numeric)：缓存内容将在xxx秒后失效（强缓存）

一、强缓存

在一定规则内强制缓存，不去寻求服务器意见（协商缓存）直接读取本地缓存或硬盘内数据。但是过期或失效后执行（协商缓存）。

大致流程步骤如下：

1、强缓存生效：

浏览器——>缓存表——>触发强缓存——>返回浏览器——>本地内存或者磁盘——>返回资源。

2、强缓存失效：

浏览器——>缓存表——>强缓存失效——>返回浏览器——>（协商缓存）。

3、列举以下为强缓存：

 Cache-Control：max-age=2592000,表示一次更新缓存信息表后2592000秒内该资源都从本地磁盘或者缓存中读取。大部分情况下直接设置强缓存都是一些不常修改或者不修改的文件（css、js、img等），若是项目逻辑文件js不建议直接使用强缓存，因为迭代更新会修改js文件会导致已经发版但是正式|测试环境中并没有体现，所以用户需要手动清空浏览器缓存（主要是清空浏览器缓存表，但是很多用户并不会此操作），因为更新强缓存还未到更新时间，所以建议设置协商缓存304（下面有介绍）。

二、协商缓存

每次请求资源前，都会向服务器发送一段大小200B左右的消息询问服务器资源是否需求重新向服务器加载资源或者是读取本地缓存或硬盘内数据。

大致缓存步骤如下：

1、协商缓存生效:

浏览器——>缓存表——>强缓存失效（或没有设置强缓存）——>返回浏览器——>服务器（返回304资源无需更新）——>浏览器——>本地内存或者磁盘——>返回资源。

2、协商缓存失效:

浏览器——>缓存表——>强缓存失效（或没有设置强缓存）——>返回浏览器——>服务器（返回200资源更新）——>浏览器。

3、列举以下为协商缓存：

Etag / If-None-Match：

Etag是服务器对该资源生成的唯一标识，存在响应头中；

If-None-Match是浏览器发送资源请求时(协商缓存失效，请求服务器最新数据返回200)保存的Etag，然后服务器内部会进行对比。相同返回304（每次304请求都会给服务器发送询问，并携带If-None-Match，数据量极小可以忽略B为单位），不同返回200（资源改变时相应资源的Etag会被新生成的替换），浏览器并更新If-None-Match为新的Etag，若相同，返回304并告知浏览器数据不需要更新浏览器直接去本地（内存/磁盘）中读取数据。

从以上的强缓存和协商缓存步骤能看出，强缓存失效后（或没有设置强缓存）会走协商缓存，每个协商缓存都是强缓存失效（或没有设置强缓存）才执行的。css文件存在磁盘中（一次加载不需要重复读取），js文件存在内存中（涉及到实时读取，存在内存中读取速度更快，损耗相对较低）。

http响应头&请求头可以参考：关于常用的http请求头以及响应头详解 - 掘金