详谈HTTP的缓存机制与原理

时间 2019-12-04

原文原文链接

概述

缓存的重要性不言而喻，经过网络请求资源缓慢而且下降了客户端的用户体验，增添了服务端的负担。不少短时间以内不会常常发生变化的资源文件不必每次访问都想服务端进行数据请求，而缓存策略的使用就是为了改善客户端的呈现时间，下降服务端的负担。html

对于HTTP的缓存机制来讲，策略体如今HTTP的头部信息的字段上，而这些策略根据是否须要从新向服务器端发起请求能够分为强缓存和协商缓存两大类。接下来用UML时序图的形式来呈现这两大类缓存策略的大致过程。java

Tips: Vscode 配合插件 plantUML画（写）UML图很爽。相比以前用的ProcessOn拖拽的形式，你只须要熟悉plantUML的语法，在你的电脑上安装一下java，Graphviz 的环境，不用操心样式的展示UML真心舒服。下面的图我就是用这个工具去画的，很推荐。git

强缓存

强缓存紧密联系着一个缓存时间期限，当浏览器请求资源的时候会查看缓存中的资源是否存在而且肯定该缓存的资源是否过了“保质期”，若没有超过保质期则将取得缓存中的资源进行下一步处理github

协商缓存

可见协商缓存不管如何都会和服务器交互，比较强缓存稍微要复杂一点，可是两者是相辅相成而且能够共同存在的，强缓存优先级较高，意味着请求一个资源时会先比较强缓存的字段，若是命中则不会再执行接下来的协商缓存的过程。express

接下来就是要介绍，两类缓存相关HTTP header相关字段的控制实现了。浏览器

细节

1.强缓存

与强缓存相关的HTTP header 的字段有两个 Expires以及Cache-Control缓存

Expires

expires 字段规定了缓存的资源的过时时间，在此时间以前，缓存中的资源都是有效的，该字段的 value 是一个格林威治时间格式（GMT)的时间,即世界标准时间，js 经过 new Date().toUTCString()可获得，形如 Tue, 27 Feb 2018 06:37:48 GMT。他的缺点很明显，时间期限是服务器生成，存在着客户端和服务器的时间偏差，固定时间，HTTP 1.0时的规范。相比较接下来介绍的cache-control优先级较低。服务器

cache-control

该字段的值（默认为private）：网络

其中最经常使用的值max-age单位为秒，对比expires体现着一个相对时间,即多少秒后这个强缓存机制下的缓存资源失效。app

public和private区别在因而否有中间商赚差价（是否容许CDN代理服务器缓存）

须要注意的一点是该字段值定义为no-cache并非说，不许使用缓存，而是须要走接下来的优先级相对较低的另外一类--协商缓存。真正决定不用缓存内的资源是将该值定义为no-store

2.协商缓存

协商缓存是经过客户端和服务端进行HTTP通讯时，所在响应头和请求头中互相表达“暧昧”的，相互通气，互送缓存标识。

Last-Modified 和 If-Modified-Since

第一次请求某一个资源时，因为必定不会走缓存，因此服务器端会在资源的响应头中加上一个形如Last-Modified:Mon, 26 Feb 2018 06:37:41 GMT的字段告诉客户端浏览器，这个资源上次最后修改的时间；刷新页面再次请求，这时候的协商缓存会在请求头中加上一个形如If-Modified-Since:Mon, 26 Feb 2018 06:37:41 GMT，字面翻译就是，是否在上个“暧昧”时间后修改了，值毫无疑问是服务端上一次响应给他的时间，让服务器去判断是否在此时间以后资源内容发生了变化。

整个过程也很简单，最后的结果也很简短。若是服务端发现改变了资源，就伴着200的 statuscode 和新鲜的资源给到客户端，如果没有修改，304 Not Modified让客户端从缓存中取。

Etag 和 If-None-Match

一样，第一次客户端请求一个资源文件时，服务端随资源在响应头部中甩来一个字段 Etag ，形如ETag:W/"1823823287"该字段的值是该资源在服务器端的惟一标识，生成的Etag值的策略有服务端决定，总之是资源的一个惟一的标识。资源发生变化则该值也发生变化。下一次客户端请求同一个资源的时候，在请求头将此次获得的值放在请求头中一个叫 If-None-Match 的字段中甩给服务端。

上述两个方式中，Etag 和 If-None-Match的优先级要高于Last-Modified 和 If-Modified-Since，进而会衍生出一个思考，两者相比功能相同，可是表达形式决定了 Etag 解决了 Last-Modified 存在的一些问题，好比Last-Modified 是比较时间，精确到秒，如果毫秒级的改变则无法兼顾，存在着周期性更改的资源，然而有可能资源自己的内容并无改变，那若是从新请求响应意义并非那么的大。因此不难理解Etag具备高优先级有他的合理之处。

简单操练一下

使用Node的Express框架可以轻松的观察到这些字段带来的影响实验。接下来经过使用Express4.x依旧保留下来的中间件express.static搭建一个建议的静态文件响应服务器。

其中 public 文件夹里面放着一个主页面和两张不同的图片用来改变

//app.js
const express = require('express')
const path = require('path')

const app = express()

app.use(express.static(path.join(__dirname, "public"), {
    etag: false,
    lastModified:false, 
    cacheControl: false,  
    setHeaders:function(res,path,stat) {
        res.set({
            expires: new Date(Date.now() + 60000),
        })
    }
}))

app.listen(3000, () => {
    console.log('App listening on port 3000!');
});

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>Hello World</h1>
    <img src="./stream.jpg">
</body>
</html>

详细的express.static的细节请参考文档，这里不过多赘述。

以前咱们提到过，expires这个选项是优先级相比较其余的控制选项，因此想要种 expires 观察效果是记得向上述app.js同样把其余的都关掉，由于他们都是默认为 true的。

而后启动服务器，访问3000端口，打开开发人员工具，你就会看到以下被种了expires的响应头了。

以后，你改变图片的名称，调换两张图片的名字，你就会发如今 expires 的时间到以前图片都不会发生变化，而且可见，他是从缓存中取得

接下来，改变app.js

app.use(express.static(path.join(__dirname, "public"), {
    etag: false,
    maxAge:30000,
    lastModified:false,   
    setHeaders:function(res,path,stat) {
        res.set({
            expires: new Date(Date.now() + 600000),
        })
    }
}))

maxAge的单位是毫秒，此时因为优先级的关系，覆盖掉 expires 以后在30秒以内交换图片名称，从新刷新浏览器将不会看到资源发生变化，知道maxAge的时间到。对应的响应头以下：

继续修改app.js:

app.use(express.static(path.join(__dirname, "public"), {
    etag: false,
    maxAge:30000,
    cacheControl: false,
    lastModified:true,   
}))

你须要删掉对强缓存的设置，由于强缓存的设置会比协商缓存被先执行，一样的操做你将看到接下来的响应头和请求头。

随后，你将上述优先级最高的 Etag 字段改成 true,获得的响应头和请求头信息以下：

此外你也会发现以下状况：

这种现象就解释了，协商缓存虽然老是要访问服务器，可是当资源没有变更的时候，服务端只会返回带着304状态码的很小的一个头部，并不会像第一次携带文件资源那么大了。