Http简介

浏览器和服务器之间通信是通过HTTP协议，HTTP协议永远都是客户端发起请求，服务器回送响应。模型如下：

HTTP报文就是浏览器和服务器间通信时发送及响应的数据块。浏览器向服务器请求数据，发送请求(request)报文；服务器向浏览器返回数据，返回响应(response)报文。报文信息主要分为两部分：

报文头部：一些附加信息（cookie，缓存信息等），与缓存相关的规则信息，均包含在头部中
数据主体部分：HTTP请求真正想要传输的数据内容

http缓存分类

Http缓存可以分为两大类，强制缓存（也称强缓存）和协商缓存。两类缓存规则不同，强制缓存在缓存数据未失效的情况下，不需要再和服务器发生交互；而协商缓存，顾名思义，需要进行比较判断是否可以使用缓存。

两类缓存规则可以同时存在，强制缓存优先级高于协商缓存，也就是说，当执行强制缓存的规则时，如果缓存生效，直接使用缓存，不再执行协商缓存规则。

DEMO

先简单搭建一个Express的服务器，不加任何缓存信息头。然后请求一下服务器端的资源文件（demo.js）

const express = require('express');
const app = express();
const port = 8080;
const fs = require('fs');
const path = require('path');

app.get('/',(req,res) => {
    res.send(`<!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Document</title>
    </head>
    <body>
        Http Cache Demo
        <script src="/demo.js"></script>
    </body>
    </html>`)
})

app.get('/demo.js',(req, res)=>{
    let jsPath = path.resolve(__dirname,'./demo.js');
    let cont = fs.readFileSync(jsPath);
    res.end(cont)
})

app.listen(port,()=>{
    console.log(`listen on ${port}`)    
})

请求结果如下：

请求过程如下:

浏览器请求静态资源demo.js
服务器读取磁盘文件demo.js，返给浏览器
浏览器再次请求，服务器又重新读取磁盘文件 a.js，返给浏览器。
循环请求。。这种请求的缺点:
浪费用户流量
浪费服务器资源，服务器要读磁盘文件，然后发送文件到浏览器
浏览器要等待js下载并且执行后才能渲染页面，影响用户体验

接下来，开始在请求头加上缓存信息

强制缓存

强制缓存分为两种情况，Expires和Cache-Control。

Expires

Expires的值是服务器告诉浏览器的缓存过期时间（值为GMT时间，即格林尼治时间），即下一次请求时，如果浏览器端的当前时间还没有到达过期时间，则直接使用缓存数据。

const express = require('express');
const app = express();
const port = 8080;
const fs = require('fs');
const path = require('path');
const moment = require('moment');

app.get('/',(req,res) => {
    res.send(`<!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Document</title>
    </head>
    <body>
        Http Cache Demo
        <script src="/demo.js"></script>
    </body>
    </html>`)
})

app.get('/demo.js',(req, res)=>{
    let jsPath = path.resolve(__dirname,'./demo.js');
    let cont = fs.readFileSync(jsPath);
    res.setHeader('Expires', getGLNZ()) //2分钟
    res.end(cont)
})

function getGLNZ(){
  return moment().utc().add(2,'m').format('ddd, DD MMM YYYY HH:mm:ss')+' GMT';
}

app.listen(port,()=>{
    console.log(`listen on ${port}`)    
})

在请求demo.js中添加了一个Expires响应头，不过由于是格林尼治时间，所以通过momentjs转换一下。第一次请求的时候还是会向服务器发起请求，同时会把过期时间和文件一起返回给我们；但是当我们刷新的时候:

文件是直接从缓存（memory cache）中读取的，并没有发起请求。我在这边设置过期时间为两分钟，两分钟过后可以刷新一下页面看到浏览器再次发送请求了。

这种方式添加了缓存控制，节省流量，但是还是有以下几个问题的：

由于浏览器时间和服务器时间不同步，如果浏览器设置了一个很后的时间，过期时间一直没有用
缓存过期后，不管文件有没有发生变化，服务器都会再次读取文件返回给浏览器

Cache-Control

服务器不是直接告诉浏览器过期时间，而是告诉一个相对时间Cache-Control=10秒，意思是10秒内，直接使用浏览器缓存

const express = require('express');
const app = express();
const port = 8080;
const fs = require('fs');
const path = require('path');
const moment = require('moment');

app.get('/',(req,res) => {
    res.send(`<!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Document</title>
    </head>
    <body>
        Http Cache Demo
        <script src="/demo.js"></script>
    </body>
    </html>`)
})

app.get('/demo.js',(req, res)=>{
    let jsPath = path.resolve(__dirname,'./demo.js');
    let cont = fs.readFileSync(jsPath);
    res.setHeader('Cache-Control', 'public,max-age=120') //2分钟
    res.end(cont)
})

app.listen(port,()=>{
    console.log(`listen on ${port}`)    
})

协商缓存

协商缓存也分两种

Last-Modified和If-Modified-Since
ETag和If-None-Match

Last-Modified

浏览器和服务器协商，服务器每次返回文件的同时，告诉浏览器文件在服务器上最近的修改时间。请求过程如下：

浏览器请求静态资源demo.js
服务器读取磁盘文件demo.js，返给浏览器，同时带上文件上次修改时间 Last-Modified（GMT标准格式）
当浏览器上的缓存文件过期时，浏览器带上请求头If-Modified-Since（等于上一次请求的Last-Modified）请求服务器
服务器比较请求头里的If-Modified-Since和文件的上次修改时间。如果果一致就继续使用本地缓存（304），如果不一致就再次返回文件内容和Last-Modified。

const express = require('express');
const app = express();
const port = 8080;
const fs = require('fs');
const path = require('path');
const moment = require('moment');

app.get('/',(req,res) => {
    res.send(`<!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Document</title>
    </head>
    <body>
        Http Cache Demo
        <script src="/demo.js"></script>
    </body>
    </html>`)
})

app.get('/demo.js',(req, res)=>{
    let jsPath = path.resolve(__dirname,'./demo.js');
    let cont = fs.readFileSync(jsPath);
    let status = fs.statSync(jsPath)

    let lastModified = status.mtime.toUTCString()
    if(lastModified === req.headers['if-modified-since']){
      res.writeHead(304, 'Not Modified')
      res.end()
    } else {
      res.setHeader('Cache-Control', 'public,max-age=5')
      res.setHeader('Last-Modified', lastModified)
      res.writeHead(200, 'OK')
      res.end(cont)
    }
})

app.listen(port,()=>{
    console.log(`listen on ${port}`)    
})

虽然这个方案比前面三个方案有了进一步的优化，浏览器检测文件是否有修改，如果没有变化就不再发送文件；但是还是有以下缺点：

由于Last-Modified修改时间是GMT时间，只能精确到秒，如果文件在1秒内有多次改动，服务器并不知道文件有改动，浏览器拿不到最新的文件
如果服务器上文件被多次修改了但是内容却没有发生改变，服务器需要再次重新返回文件。

ETag

为了解决文件修改时间不精确带来的问题，服务器和浏览器再次协商，这次不返回时间，返回文件的唯一标识ETag。只有当文件内容改变时，ETag才改变。请求过程如下：

浏览器请求静态资源demo.js
服务器读取磁盘文件demo.js，返给浏览器，同时带上文件的唯一标识ETag
当浏览器上的缓存文件过期时，浏览器带上请求头If-None-Match（等于上一次请求的ETag）请求服务器
服务器比较请求头里的If-None-Match和文件的ETag。如果一致就继续使用本地缓存（304），如果不一致就再次返回文件内容和ETag。

const express = require('express');
const app = express();
const port = 8080;
const fs = require('fs');
const path = require('path');
const md5 = require('md5');

app.get('/',(req,res) => {
    res.send(`<!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Document</title>
    </head>
    <body>
        Http Cache Demo
        <script src="/demo.js"></script>
    </body>
    </html>`)
})

app.get('/demo.js',(req, res)=>{
  let jsPath = path.resolve(__dirname,'./demo.js');
  let cont = fs.readFileSync(jsPath);
  let etag = md5(cont);

  if(req.headers['if-none-match'] === etag){
      res.writeHead(304, 'Not Modified');
      res.end();
  } else {
      res.setHeader('ETag', etag);
      res.writeHead(200, 'OK');
      res.end(cont);
  }
})

app.listen(port,()=>{
    console.log(`listen on ${port}`)    
})

缓存的优先级

Cache-Control > Expires > ETag > Last-Modified

前端应该知道Http缓存机制