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

 

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

一 缓存介绍

1 什么是缓存？

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

2 缓存有什么好处？

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

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

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

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

3 Web缓存的种类有哪些？

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

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

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

浏览器缓存位置一般分为四类：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，不符合则服务器会返回全新资源。

(3)  相关字段介绍

①expires

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

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

②Cache-Control

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

• public：资源客户端和服务器都可以缓存。

• privite：资源只有客户端可以缓存。

• no-cache：客户端缓存资源，但是是否缓存需要经过协商缓存来验证。

• no-store：不使用缓存。

• max-age：缓存保质期。

  

③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，并返回新资源。

②Etag / If-None-Match

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

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

三 常见面试问题总结

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

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

HTML: 协商缓存；

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

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

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

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

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

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

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

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

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

软件测试面试文档

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