HTTP - 缓存策略

前端开发的同窗你们都知道，项目中的静态文件等信息，都要作缓存处理，这里，咱们就来讲一下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
复制代码

下图例子使用的是http 1.1，因此携带的是 If-None-Match

常见问题

缓存当然好用，可是在开发过程当中，常常会遇到由于缓存而没有更新的状况。这里记一下经常使用的两个方案：

• 添加版号参数：binnie.js?v=1.0
• 命名添加hash值：binnie.hash.js

写在最后

缓存能够有效提高请求速度，减小服务器压力，在项目中能够好好利用～