前端缓存详解

1、浏览器缓存是设置在ajax请求头的；

2、浏览器缓存大部分都是后端开发设置的，前端开发设置的不多；前端面试总是讲这个问题，是考验一下前端开发对浏览器原理的理解

3、浏览器缓存分为两个；强缓存和协商缓存

4、强缓存和协商缓存不是对立的；强缓存发生在浏览器端不会请求服务器；强缓存失效请求服务器，服务器进行协商缓存的判断

5、强缓存主要考验面试者对浏览器原理的理解；

6、强缓存分为内存缓存和硬盘缓存（内存访问速度快，但是关闭 页面浏览器就会清楚内存；硬盘缓存是缓存再硬盘里；浏览器关闭页面了重新打开照样可以获取；浏览器不会清楚硬盘内容）

7、强缓存内存缓存一般是img、js等信息，js等会经常变化的信息；硬盘缓存主要缓存css这种不经常变化的信息

8、强缓存http1.1之后有设置有效期，有效期内先查内存，再查硬盘获取信息；不请求后端服务

9、清缓存有效期过期了，请求后端服务，后端服务开始根据请求头判断协商缓存的操作

10、协商缓存是后端存储的，查询后端存储直接返回，不去重新查询数据库等；

11、协商缓存还是要判断数据是否更新的，没有更新就直接换回缓存内容，更新数据了者重新查询数据库请求

原文地址：面试题什么是浏览器缓存_码农有梦想的博客-CSDN博客_浏览器缓存面试题

一.是什么：

缓存的概念：

浏览器会将请求后的资源进行存贮为离线资源，当下次需要该资源时，浏览器会根据缓存机制决定直接使用缓存资源还是再次向服务器发送请求。

强缓存：

只要没到有效期，就继续使用本地离线资源，不向服务器发请求

协商缓存：

本质是用本地缓存的资源和服务器资源相比对，看看是否一致或者说是有更新，如果未更新，继续使用离线资源；如果已更新则重新发请求

缓存机制流程图

二：流程图解读：

1.进入浏览器时，先判断是否有缓存，初次进入时没有缓存，就会向服务器发请求拿资源，返回缓存字段、标识（为方便记忆简称为ecle）expires、cache-control、last-modefied、etag，并将资源注入缓存，加载页面。

2.第二次进入浏览器，判断是否有缓存， 如果有缓存，根据expires或者cache-control判断缓存是否过期，如果缓存未过期，走强缓存，使用本地离线资源加载页面。

expires：是HTTP/1.0版本的响应头，是绝对时间（到具体某个时间就过期），以电脑本地时间为基准，如果修改本地时间将会影响expires到期时间

cache-control：是HTTP1.1版本响应头，是相对时间（缓存还有***秒失效），优先级高于expires

3. 如果有缓存，经expires或者cache-control判断缓存过期了，那么就会走协商缓存，会向浏览器发请求并携带请求头 if-none-match（值为etag）和if-modified-since（值为last-modified），浏览器会开始比对看本地离线资源和服务器上的资源是否一致，服务器上的是否是更新的版本，如果没有更新，协商缓存失效，返回状态码304，继续使用本地离线资源，不会发起请求；如果已经更新，协商缓存生效，返回状态码200，那重新发起请拿资源，和缓存标识（ecle），并将资源注入缓存。

三：强缓存和协商缓存区别

强缓存：不会和服务器交互，不会发起请求

协商缓存：会和服务器交互，来判断资源有没有变化

四：缓存的好处

1.减少请求次数，缓解服务器压力

2.提升性能，增强用户体验，使用本地资源肯定会比请求服务器更快
3.减少带宽消耗，当我们使用缓存时，只会产生很小的网络消耗。