HTTP - 缓存策略

最新推荐文章于 2024-04-21 14:27:09 发布

weixin_34217711

最新推荐文章于 2024-04-21 14:27:09 发布

阅读量102

点赞数

文章标签：前端 ViewUI

原文链接：https://juejin.im/post/5c46b0d8f265da61193c21ab

版权

前端开发的同学大家都知道，项目中的静态文件等信息，都要做缓存处理，这里，我们就来说一下HTTP的缓存策略。

what

缓存，顾名思义，其实就把是拿到的资源存起来，下次要用的时候就可以直接使用啦。有什么作用呢？重用已获取的资源能够有效的提升网站与应用的性能。

类型

缓存其实是一个很广义的概念，用到的地方很多，当然作用只有一个，就是利用空间换取时间，读取本地的资源当然会比取远端读取资源来得快得多。

缓存可以在很多地方：

浏览器缓存：用户请求过一次之后，直接把资源缓存到本地
网关缓存：对某个网站的资源进行缓存，用户可直接在网关获取数据即可
服务器缓存：对某些变动不大的get请求，使用缓存可提升接口速度

这里，我们主要讲的是浏览器缓存～

浏览器缓存

当我们搭建一个网站的时候，其实一些静态资源的改动并不会很经常，比如：js、css、图片等，这种资源，其实我们可以缓存到用户的本地，下次访问这些资源的时候，直接从命中缓存即可，即加快用户访问速度，又可以减少服务器的压力。

HTTP的缓存，分为两种：强缓存 & 协商缓存

强缓存

强缓存，即用户请求资源的时候，发现资源为强缓存类型，直接获取缓存数据即可。

当用户第一次请求资源时，http通过响应头设置缓存策略。浏览器接受到强缓存的信息之后就会把资源缓存到用户本地。

命中强缓存有两个字段，下图为掘金某个css的响应头。

// response 响应头 
// http 1.1
// 相对时间
Cache-Control: max-age=4349423
// http 1.0
// 绝对时间
Expires: Sun, 27 Jan 2019 12:19:08 GMT
复制代码

用户第二次访问资源的时候，如果缓存不过期，那么浏览器直接拉取缓存数据即可。

协商缓存

那么，当浏览器缓存过期了怎么办？这时协商缓存就派上用场了～

当我们访问资源时，响应头会携带协商缓存相关的字段。

// response 响应头 
// http 1.1
// 版本号，唯一值
ETag: "FgYgxdS8M2VvNzaIz7oN1XW10A8l.gz"
// http 1.0
// 最后更新时间
Last-Modified: Fri, 17 Nov 2017 07:31:58 GMT
复制代码

当强缓存过期时，浏览器发请求的时候会携带协商缓存对应的字段在请求头中，服务器根据请求头中的信息，如果命中缓存，则返回304，否则直接请求数据即可。

// requet 请求头
// http 1.1
// 上一次请求的ETag
If-None-Match: "FgYgxdS8M2VvNzaIz7oN1XW10A8l.gz"
// http 1.0
// 上一次请求的Last-Modified
If-Modified-Since : Fri, 17 Nov 2017 07:31:58 GMT
复制代码