性能优化第一弹——缓存大探究

Posted 2021-04-15 萌兔it

Hello大家好，今天我们的主题是缓存！为什么要谈缓存，相信做前端开发的同学们都对缓存又爱又恨，因为它对于性能影响真的很大。优秀的缓存策略能够减少网页渲染延迟，但是缓存有常常会带来一些不必要的麻烦，下面我们就一同仔细探究一下缓存吧～

浏览器缓存

浏览器缓存说白了就是我们上网的时候浏览了一些资源，如图片、js文件等，浏览器就自己备份了一份存在浏览器里，下次访问时直接就把这个备份掏出来了，这就是浏览器缓存。在开发的时候，我们常常觉得自己修改了代码就是不生效，这就是因为浏览器缓存。

01.浏览器缓存规则

浏览器端的缓存，通过HTTP的头部和meta标签进行设置。分别从过期机制和验证机制两个维度来规定浏览器是否可以直接使用缓存中的副本。

过期机制：缓存都有一个有效期，超过有效期，缓存就会失效。要满足HTTP在头部设置过期时间并在时间内，而且浏览器曾经浏览过这个备份；

验证机制：服务器返回资源的时候有时在控制头信息带上实体标签Etag（Entity Tag），用来作为浏览器再次请求过程的校验标识。如果发现校验标识不匹配，说明资源已经被修改或过期，浏览器需求重新获取资源内容。

02.浏览器缓存控制

1）在html中设置<meta>标签：<meta http-equiv="Pragma" content="no-cache">  

2）设置HTTP消息报头：设置Pragma、Expires、 Cache-Control、 Last-Modified、 If-Modified-Since、ETag、If-None-Match等信息。

HTTP缓存

在上边我们对浏览器缓存做了一个简单的介绍，下面我们详细介绍一下HTTP缓存。

（1） Cache-Control与Expires：Cache-Control优先级较高，两者都是控制有效期，从而控制浏览器从缓存获取数据还是从服务器获取数据。

（2） Last-Modified/ETag与Cache-Control/Expires：配置了前者时，浏览器再次访问URI时，重新发送请求到服务器询问文件时候修改，没有则返回304给浏览器，通知浏览器自己从自己本地直接获取数据，修改过则响应整个数据；后者首先检测本地缓存是否在有效期内，在则直接从本地缓存获取。后者优先级高于前者。

（3） Last-Modified与ETag：ETag是HTTP1.1中出现的，帮助Last-Modified解决了不少麻烦：ETag是由服务器自动生成或开发者生成的对应资源，在服务器端是唯一的标识符，从而更加准确的控制缓存。当两者同时出现时，服务器先验证ETag。

下图是浏览器第一次请求和第二次请求的对比图：

介绍了上述设置的含义后，我们下面详细介绍一下强缓存和协商缓存：

01.强缓存

不会向服务器发送请求，直接从缓存中读取资源，返回200状态码。通过：Expires和Cache-Control实现。

02.协商缓存

协商缓存是强缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程，通过设置Last-Modified和ETag实现

缓存生效：返回304和Not Modified

缓存失效：返回200和请求响应

好啦，今天的缓存就写到这里了，大家记住了吗，通过HTML5设置缓存我们可以通过meta标签设置，通过HTTP报头设置，则分为强缓存与协商缓存，强缓存生效则直接使用缓存，不生效，则进行协商缓存，协商缓存向服务器发起请求，由服务器决定是否使用缓存，使用则返回304，反之则返回200与响应数据。

喜欢兔妞的文章就请关注+好看吧，祝小伙伴们越点好看越好看呦～～