前言
大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，根底是进阶的前提是我的初心
背景
无论是开发中或者是面试中，HTTP缓存都是十分重要的，这体现在了两个方面：
- 开发中：正当利用
HTTP缓存能够进步前端页面的性能 - 面试中：
HTTP缓存是面试中的高频问点
所以本篇文章，我不讲废话，我就通过 Nodejs 的简略实际，给大家讲最通俗易懂的HTTP缓存，大家通过这篇文章肯定能理解把握它！！！
前置筹备
筹备
创立文件夹
cache-study，并筹备环境npm init装置
Koa、nodemonnpm i koa -Dnpm i nodemon -g- 创立
index.js、index.html、static文件夹 index.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./static/css/index.css"></head><body><div class="box"></div></body></html>static/css/index.css.box {width: 500px;height: 300px;background-image: url('../image/guang.jpg');background-size: 100% 100%;color: #000;}static/image/guang.jpg
index.jsconst Koa = require('koa')const fs = require('fs')const path = require('path')const mimes = {css: 'text/css',less: 'text/css',gif: 'image/gif',html: 'text/html',ico: 'image/x-icon',jpeg: 'image/jpeg',jpg: 'image/jpeg',js: 'text/javascript',json: 'application/json',pdf: 'application/pdf',png: 'image/png',svg: 'image/svg+xml',swf: 'application/x-shockwave-flash',tiff: 'image/tiff',txt: 'text/plain',wav: 'audio/x-wav',wma: 'audio/x-ms-wma',wmv: 'video/x-ms-wmv',xml: 'text/xml',}// 获取文件的类型function parseMime(url) {// path.extname获取门路中文件的后缀名let extName = path.extname(url)extName = extName ? extName.slice(1) : 'unknown'return mimes[extName]}// 将文件转成传输所需格局const parseStatic = (dir) => {return new Promise((resolve) => { resolve(fs.readFileSync(dir), 'binary')})}const app = new Koa()app.use(async (ctx) => {const url = ctx.request.urlif (url === '/') { // 拜访根门路返回index.html ctx.set('Content-Type', 'text/html') ctx.body = await parseStatic('./index.html')} else { const filePath = path.resolve(__dirname, `.${url}`) // 设置类型 ctx.set('Content-Type', parseMime(url)) // 设置传输 ctx.body = await parseStatic(filePath)}})app.listen(9898, () => {console.log('start at port 9898')})启动页面
当初你能够在终端中输出
nodemon index，看到下方的显示，则代表胜利启动了服务
此时你能够在浏览器链接里输出 http://localhost:9898/ ，关上看到如下页面，则代表页面拜访胜利！！！
HTTP缓存品种
HTTP缓存 常见的有两类：
强缓存：能够由这两个字段其中一个决定expirescache-control(优先级更高)
协商缓存：能够由这两对字段中的一对决定Last-Modified，If-Modified-SinceEtag，If-None-Match(优先级更高)
强缓存
接下来咱们就开始讲强缓存
expires
咱们只需设置响应头里 expires 的工夫为 以后工夫 + 30s 就行了
app.use(async (ctx) => { const url = ctx.request.url if (url === '/') { // 拜访根门路返回index.html ctx.set('Content-Type', 'text/html') ctx.body = await parseStatic('./index.html') } else { const filePath = path.resolve(__dirname, `.${url}`) // 设置类型 ctx.set('Content-Type', parseMime(url)) // 设置 Expires 响应头 const time = new Date(Date.now() + 30000).toUTCString() ctx.set('Expires', time) // 设置传输 ctx.body = await parseStatic(filePath) }})而后咱们在前端页面刷新，咱们能够看到申请的资源的响应头里多了一个 expires 的字段
并且，在30s内，咱们刷新之后，看到申请都是走 memory ，这意味着，通过 expires 设置强缓存的时效是30s，这30s之内，资源都会走本地缓存，而不会从新申请
留神点：有时候你Nodejs代码更新了时效工夫，然而发现前端页面还是在走上一次代码的时效，这个时候，你能够把这个 Disabled cache 打钩，而后刷新一下，再勾销打钩cache-control
其实 cache-control 跟 expires 成果差不多，只不过这两个字段设置的值不一样而已，前者设置的是 秒数 ，后者设置的是 毫秒数
app.use(async (ctx) => { const url = ctx.request.url if (url === '/') { // 拜访根门路返回index.html ctx.set('Content-Type', 'text/html') ctx.body = await parseStatic('./index.html') } else { const filePath = path.resolve(__dirname, `.${url}`) // 设置类型 ctx.set('Content-Type', parseMime(url)) // 设置 Cache-Control 响应头 ctx.set('Cache-Control', 'max-age=30') // 设置传输 ctx.body = await parseStatic(filePath) }})前端页面响应头多了 cache-control 这个字段，且30s内都走本地缓存，不会去申请服务端
协商缓存
与 强缓存 不同的是， 强缓存 是在时效工夫内，不走服务端，只走本地缓存；而 协商缓存 是要走服务端的，如果申请某个资源，去申请服务端时，发现 命中缓存 则返回 304 ，否则则返回所申请的资源，那怎么才算 命中缓存 呢？接下来讲讲
Last-Modified，If-Modified-Since
简略来说就是:
- 第一次申请资源时，服务端会把所申请的资源的
最初一次批改工夫当成响应头中Last-Modified的值发到浏览器并在浏览器存起来 - 第二次申请资源时，浏览器会把刚刚存储的工夫当成申请头中
If-Modified-Since的值，传到服务端，服务端拿到这个工夫跟所申请的资源的最初批改工夫进行比对 - 比对后果如果两个工夫雷同，则阐明此资源没批改过，那就是
命中缓存，那就返回304，如果不雷同，则阐明此资源批改过了，则没命中缓存，则返回批改过后的新资源
// 获取文件信息const getFileStat = (path) => { return new Promise((resolve) => { fs.stat(path, (_, stat) => { resolve(stat) }) })}app.use(async (ctx) => { const url = ctx.request.url if (url === '/') { // 拜访根门路返回index.html ctx.set('Content-Type', 'text/html') ctx.body = await parseStatic('./index.html') } else { const filePath = path.resolve(__dirname, `.${url}`) const ifModifiedSince = ctx.request.header['if-modified-since'] const fileStat = await getFileStat(filePath) console.log(new Date(fileStat.mtime).getTime()) ctx.set('Cache-Control', 'no-cache') ctx.set('Content-Type', parseMime(url)) // 比对工夫，mtime为文件最初批改工夫 if (ifModifiedSince === fileStat.mtime.toGMTString()) { ctx.status = 304 } else { ctx.set('Last-Modified', fileStat.mtime.toGMTString()) ctx.body = await parseStatic(filePath) } }})第一次申请时，响应头中：
第二次申请时，申请头中：
因为资源并没批改，则命中缓存，返回304：
此时咱们批改一下 index.css
.box { width: 500px; height: 300px; background-image: url('../image/guang.jpg'); background-size: 100% 100%; /* 批改这里 */ color: #333;}而后咱们刷新一下页面， index.css 变了，所以会 没命中缓存 ，返回200和新资源，而 guang.jpg 并没有批改，则 命中缓存 返回304：
Etag，If-None-Match
其实 Etag，If-None-Match 跟 Last-Modified，If-Modified-Since 大体一样，区别在于：
- 后者是比照资源最初一次批改工夫，来确定资源是否批改了
- 前者是比照资源内容，来确定资源是否批改
那咱们要怎么比对资源内容呢？咱们只须要读取资源内容，转成hash值，前后进行比对就行了！！
const crypto = require('crypto')app.use(async (ctx) => { const url = ctx.request.url if (url === '/') { // 拜访根门路返回index.html ctx.set('Content-Type', 'text/html') ctx.body = await parseStatic('./index.html') } else { const filePath = path.resolve(__dirname, `.${url}`) const fileBuffer = await parseStatic(filePath) const ifNoneMatch = ctx.request.header['if-none-match'] // 生产内容hash值 const hash = crypto.createHash('md5') hash.update(fileBuffer) const etag = `"${hash.digest('hex')}"` ctx.set('Cache-Control', 'no-cache') ctx.set('Content-Type', parseMime(url)) // 比照hash值 if (ifNoneMatch === etag) { ctx.status = 304 } else { ctx.set('etag', etag) ctx.body = fileBuffer } }})验证形式跟刚刚 Last-Modified，If-Modified-Since 的一样，这里就不反复阐明了。。。
总结
参考资料
- https://blog.csdn.net/qq_3243...
结语
我是林三心，一个热心的前端菜鸟程序员。如果你上进，喜爱前端，想学习前端，那咱们能够交朋友，一起摸鱼哈哈，摸鱼群，加我请备注【思否】