前端部署(二)

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

初始化环境(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-Modifyif-modified-since

当再次请求时image-20220929200325195

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

image-20220929200505462

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

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

协商缓存