前端性能优化，你对浏览器缓存方式知多少？

柔情只为你懂 2023-10-15 10:54 8阅读 0赞

**![20094af8830a48af81267664f166a162.png][]**

在前端性能优化中，最重要的就是缓存，使用缓存可以极大的提升浏览器的响应速率。缓存对项目有很大的帮助，比如我们访问网页时，使用网页后退功能，会发现加载的非常快，体验感很好，这就是缓存的力量。

### **一 缓存介绍** ###

### **1 什么是缓存？** ###

当我们第一次访问网站的时候，比如ITester.com，电脑会把网站上的图片和数据下载到电脑上，当我们再次访问该网站的时候，网站就会从电脑中直接加载出来，这就是`缓存`。

### **2 缓存有什么好处？** ###

大体来说，浏览器缓存有如下`3`个好处：

1.缓解服务器压力，不用每次都去请求某些数据。

2.提升性能，打开本地资源肯定会比请求服务器来的快。

3.减少带宽消耗，当我们使用缓存时，只会产生很小的网络消耗。

### **3** **Web缓存的种类有哪些？** ###

###### 所谓浏览器缓存其实就是指在本地使用的计算机中开辟一个内存区，同时也开辟一个硬盘区作为数据传输的`缓冲区`，然后用这个缓冲区来暂时保存用户以前访问过的信息。 ######

###### 缓存包括数据库缓存，CDN缓存，代理服务器缓存，浏览器缓存。其中浏览器缓存也指的是HTTP缓存，当我们使用浏览器用http协议与服务器交互时，浏览器会使用一种与服务器约定的规则进行缓存操作。 ######

![图片][b3a228c496c04c4ccb9e04cab72ca5e0.png]

#### 浏览器缓存过程： 强缓存，协商缓存。 ####

浏览器缓存位置一般分为四类：Service Worker->Memory Cache->Disk Cache->Push Cache。

### **二 缓存类型介绍** ###

浏览器的缓存位置一般分为强缓存和协商缓存。

他们之前的区别是强缓存不需要向浏览器发送请求，直接从缓存中读取资源，协商缓存需要询问浏览器缓存是否过期以确定从哪里读取资源。

### **1** **强缓存** ###

**(1) 什么是强缓存？**

强缓存是当我们访问URL的时候，不会向服务器发送请求，直接从缓存中读取资源，但是会返回200的状态码。

**(2) 如何设置强缓存？**

我们第一次进入页面，请求服务器，然后服务器进行应答，浏览器会根据response Header来判断是否对资源进行缓存。如果响应头中expires、pragma或者cache-control字段，代表这是强缓存，浏览器就会把资源缓存在memory cache 或 disk cache中。

第二次请求时，浏览器判断请求参数，如果符合强缓存条件就直接返回状态码200，从本地缓存中拿数据。否则把响应参数存在request header请求头中，看是否符合协商缓存，符合则返回状态码304，不符合则服务器会返回全新资源。

![图片][8abe35e1c3b1b47034e1ef292d41a7e4.png]

**(3) 相关字段介绍**

**①expires**

`expires`是HTTP1.0控制网页缓存的字段，值为一个时间戳，准确来讲是格林尼治时间，服务器返回该请求结果缓存的到期时间，意思是，再次发送请求时，如果未超过过期时间，直接使用该缓存，如果过期了则重新请求。

expires的缺点就是它判断是否过期是用本地时间来判断的，本地时间是可以自己修改的。

**②Cache-Control**

`Cache-Control`是HTTP1.1中控制网页缓存的字段，当Cache-Control都存在时，Cache-Control优先级更高，主要取值为：

*  public：资源客户端和服务器都可以缓存。
 *  privite：资源只有客户端可以缓存。
 *  no-cache：客户端缓存资源，但是是否缓存需要经过协商缓存来验证。
 *  no-store：不使用缓存。
 *  max-age：缓存保质期。
    
    ![图片][cc1f12007157ca5c4918593c86f83258.png]

**③pragma**

`pragma`是HTTP1.0中禁用网页缓存的字段，其取值为no-cache，和Cache-Control的no-cache效果一样。

### **2** **协商缓存** ###

**(1) 什么是协商缓存？**

协商缓存是在强缓存失效之后，浏览器携带缓存标识向服务器发起请求，由服务器决定是否使用缓存。协商缓存可以通过两种HTTP Header来实现：Last-Modified和ETag。主要有以下两种情况：

*  协商缓存生效，返回304；
 *  协商缓存失效，返回200和请求结果

**(2) 如何设置协商缓存？**

**①Last-Modified / If-Modified-Since**

Last-Modified是服务器响应请求时，返回该资源文件在服务器最后被修改的时间。

浏览器第一次访问资源时，服务器会在response头中添加时间节点，这个事件点是服务器最后一次修改文件的时间点，浏览器第二次访问该资源时，检测到缓存文件中有last-Modified，就会在第二次请求头中添加if-Modified-Since，值为上次Last-Modified的值，服务器拿到该值后，会与该资源在服务器端的最后修改时间做对比，如果相同，则说明命中缓存，返回304，如果不相同，则会返回200，并返回新资源。

![图片][80053b7f4ba169d64f74bf1243c1677c.png]

**②Etag / If-None-Match**

Etag是服务器响应请求时，返回当前资源文件的一个唯一标识(由服务器生成)。

If-None-Match是客户端再次发起该请求时，携带上次请求返回的唯一标识Etag值，通过此字段值告诉服务器该资源上次请求返回的唯一标识值。服务器收到该请求后，发现该请求头中含有If-None-Match，则会根据If-None-Match的字段值与该资源在服务器的Etag值做对比，一致则返回304，代表资源无更新，继续使用缓存文件；不一致则重新返回资源文件，状态码为200。

![图片][6d3dcd4431885f793d2a2a90f427af86.png]

### **三 常见面试问题总结** ###

### **1 你所知道的项目缓存方案是怎么样的？** ###

目前的项目大多使用这种缓存方案的：

HTML: 协商缓存；

css、js、图片：强缓存，文件名带上hash。

### **2 强缓存和协商缓存的区别？** ###

1. 强缓存不发请求到服务器，所以有时候资源更新了浏览器还不知道，但是协商缓存会发请求到服务器，所以资源是否更新，服务器肯定知道。

2. 大部分web服务器都默认开启协商缓存。

### **3** **刷新对于强缓存和协商缓存的影响？** ###

1. 当ctrl+f5强制刷新网页时，直接从服务器加载，跳过强缓存和协商缓存。

2. 当f5刷新网页时，跳过强缓存，但是会检查协商缓存。

3. 浏览器地址栏中写入URL，回车 浏览器发现缓存中有这个文件了，不用继续请求了，直接去缓存拿。

**最后：**下方这份完整的软件测试视频教程已经整理上传完成，需要的朋友们可以自行领取**【保100%免费】**

![8b0171187dce405e878f274a8cdd9ec0.png][]

#### **软件测试面试文档** ####

我们学习必然是为了找到高薪的工作，下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料，并且有字节大佬给出了权威的解答，刷完这一套面试资料相信大家都能找到满意的工作。

![a3e4226c935c4242804cbdf26b571bc6.png][]

![58df6cd288094ad8874e814f2477620b.gif][]

[20094af8830a48af81267664f166a162.png]: https://img-blog.csdnimg.cn/20094af8830a48af81267664f166a162.png
[b3a228c496c04c4ccb9e04cab72ca5e0.png]: https://img-blog.csdnimg.cn/img_convert/b3a228c496c04c4ccb9e04cab72ca5e0.png
[8abe35e1c3b1b47034e1ef292d41a7e4.png]: https://img-blog.csdnimg.cn/img_convert/8abe35e1c3b1b47034e1ef292d41a7e4.png
[cc1f12007157ca5c4918593c86f83258.png]: https://img-blog.csdnimg.cn/img_convert/cc1f12007157ca5c4918593c86f83258.png
[80053b7f4ba169d64f74bf1243c1677c.png]: https://img-blog.csdnimg.cn/img_convert/80053b7f4ba169d64f74bf1243c1677c.png
[6d3dcd4431885f793d2a2a90f427af86.png]: https://img-blog.csdnimg.cn/img_convert/6d3dcd4431885f793d2a2a90f427af86.png
[8b0171187dce405e878f274a8cdd9ec0.png]: https://img-blog.csdnimg.cn/8b0171187dce405e878f274a8cdd9ec0.png
[a3e4226c935c4242804cbdf26b571bc6.png]: https://img-blog.csdnimg.cn/a3e4226c935c4242804cbdf26b571bc6.png
[58df6cd288094ad8874e814f2477620b.gif]: https://img-blog.csdnimg.cn/58df6cd288094ad8874e814f2477620b.gif