详细解释前端所说的浏览器缓存

野性酷女 2022-11-29 12:15 94阅读 0赞

**什么是浏览器缓存？**  
浏览器缓存就是把一个已经请求过的web资源（如html页面，图片，JS，数据）拷贝一份放在浏览器中。缓存会根据进来的请求保存输入内容的副本。当下一个请求到来的时候，如果是相同的URL，浏览器会根据缓存机制决定是直接使用副本响应访问请求还是向源服务器再次发起请求。

**使用缓存的用处**  
1、减少网络带宽消耗，当web缓存副本被使用时，只会产生极小的网络流量，可以有效降低运营成本。  
2、降低服务器压力，给网络资源设定有效期之后，用户可以重复使用本地缓存，减少对源服务器的请求，降低了对服务器的压力。  
3、减少网络延迟，缓存的使用可以明显加快页面打开速度，达到更好的用户体验。

**浏览器缓存的控制**  
使用缓存有关的HTTP消息报头在HTTP请求和响应的消息报头中，常见与缓存有关的消息报头有：  
1、Expires  
启用缓存和定义缓存时间。告诉浏览器资源缓存过期时间，如果还没过该时间点则不发请求【http1.0中存在的字段，该字段所定义的缓存时间是相对服务器上的时间而言的，如果客户端上的时间跟服务器上的时间不一致（特别是用户修改了自己电脑的系统时间），那缓存时间可能就没意义了。在HTTP 1.1版开始，使用Cache-Control: max-age=秒替代】，在无法确定客户端的时间是否与服务端的时间同步的情况下，Cache-Control相比于expires是更好的选择，Cache-Control的优先级比expires高所以同时存在时只有Cache-Control生效。

2、Cache-Control  
在HTTP/1.1中，Cache-Control是最重要的规则，主要用于控制网页缓存，主要取值为：  
（1）public：所有内容都将被缓存（客户端和代理服务器都可缓存）  
（2）private：所有内容只有客户端可以缓存，Cache-Control的默认取值  
（3）no-cache：告诉浏览器忽略资源的缓存副本，强制每次请求直接发送给服务器，拉取资源，但不是“不缓存  
（4）no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存  
（5）max-age=xxx (xxx is numeric)：缓存内容将在xxx秒后失效  
3、 Last-Modified  
告诉浏览器这个资源最后的修改时间。服务器将资源传递给客户端时，会将资源最后更改的时间以“Last-Modified: GMT”的形式加在实体首部上一起返回给客户端【只能精确到秒级，如果某些文件在1秒钟以内，被修改多次的话，它将不能准确标注文件的修改时间】  
4、If-Modified-Since  
其值为上次响应头的Last-Modified值，再次向web服务器请求时带上头If-Modified-Since。web服务器收到请求后发现有头If-Modified-Since则与被请求资源的最后修改时间进行比对。若最后修改时间较新，说明资源又被改动过，则响应整片资源内容（写在响应消息包体内），包括更新Last-Modified的值，HTTP 200；若最后修改时间较旧，说明资源无新修改，则响应HTTP 304(无需包体，节省浏览)，告知浏览器继续使用所保存的cache

5、Etag  
资源在服务器的唯一标识（生成规则由服务器决定）。Apache中，ETag的值，默认是对文件的索引节（INode），大小（Size）和最后修改时间（MTime）进行Hash后得到的。

6、If-None-Match  
当缓存过期时，发现资源具有Etage声明，则在请求头带上If-None-Match（值就是Etag）。服务器收到请求后发现有头If-None-Match 则与被请求资源的相应校验串进行比对，决定返回200或304。

**不能被缓存的请求**  
无法被浏览器缓存的请求：  
1、HTTP信息头中包含Cache-Control:no-cache，pragma:no-cache（HTTP1.0），或Cache-Control:max-age=0等告诉浏览器不用缓存的请求  
2、需要根据Cookie，认证信息等决定输入内容的动态请求是不能被缓存的  
3、经过HTTPS安全加密的请求  
4、POST请求无法被缓存  
5、HTTP响应头中不包含Last-Modified/Etag，也不包含Cache-Control/Expires的请求无法被缓存