上次说了利用缓存，以便下次重新访问，节省带宽，提高访问速度。
从这方面提了 协商缓存 强缓存 ，只是理论上说了说（性能优化）
这期我们就来实践一下， 当然有很多种方式（这是最常见的两种，也是最基本的两种）

初始化环境（node+express）

npm i express
npm i express-router
app.js（↓）

let express = require('express');
let app = express();
var router = require('./module/router');
app.use('/api',router);

app.get('/',function(req,res){
    res.send('hello,word')
})
app.listen(3000)
router.js(↓)

let express = require('express');
let router = express.Router();

// 特定于此路由器的中间件
// router.use(function timeLog (req, res, next) { 
//     console.log('Requested URI Path : ', req.url) 
//     next() 
//  }) 

// fs路线
router.get('/fs', function (req, res) { 
    res.send('About birds') 
}) 

module.exports = router;

初始化环境 OK

强缓存

我们上次说到强缓存是因为 协商缓存是通过请求，如果文件一多，请求也随着越多，强缓存也由此而来，在资源没有发生变更的时候，我们优化掉这个协商缓存。

简单一句话：浏览器不会向服务器发送请求，从本地缓存读取数据。用上强缓存，协商请求也被消灭了，网站加载性能达到极致。

强缓存是利用 http头中的 Cache-Control 字段控制的。

Cache-Control有一些常设置的值

  • private：仅浏览器可以缓存（默认值）；
  • public：浏览器和代理服务器都可以缓存；
  • max-age=xxx：过期时间单位秒；
  • no-cache：不进行强缓存；
  • no-store：不强缓存，也不协商缓存）
    image-20220929190544204

强缓存

协商缓存

上次提到 协商缓存是通过一个唯一值&校验码，服务器根据一个 If-None-Match 值来判断是否命中缓存，如果命中，则返回 304，通知浏览器从缓存中读取资源

这里要提到 Last-Modify和if-modified-since

当再次请求时image-20220929200325195

当浏览器第一次请求资源时，响应头会带上 Last-Modified，后面是该资源最后修改的时间。

image-20220929200505462

请求头会包含 if-modified-since 该值为缓存之前返回的Last-Modify。服务器收到if-modified-since后，根据资源的最后修改时间判断是否命中缓存。

如果命中缓存，则返回304，并且不会返回资源内容，并且不会返回Last-Modify。

协商缓存