|
|
51CTO旗下网站
|
|
移动端

手写一个静态资源中间件,加深了解服务器对文件请求的缓存策略

我们从理论上介绍了浏览器和服务器是如何对静态资源做缓存的,这篇文章我们把它做成一个node服务器的静态资源中间件。

作者:做前端的蜗牛来源:今日头条|2020-03-18 21:33

我们从理论上介绍了浏览器和服务器是如何对静态资源做缓存的,这篇文章我们把它做成一个node服务器的静态资源中间件。

代码开发

既然是开发中间件,肯定是服务端要做的事情,大致流程如下:

手写一个静态资源中间件,加深了解服务器对文件请求的缓存策略

图1

  • 服务器接收到请求,先解析地址path(一般都是通过path对应到工程下的具体文件);
  • 检查缓存头标志,如果内容没过期,仅修改头信息,304状态返回,如果内容过期了,就要正常返回内容。
手写一个静态资源中间件,加深了解服务器对文件请求的缓存策略

图2

我们在static.js文件中开发,这个中间件允许设置目录和其他参数,如图2所示。

手写一个静态资源中间件,加深了解服务器对文件请求的缓存策略

图3

如果不是GET或者HEAD请求,可以直接跳过这个中间件,也可以直接返回点什么!

手写一个静态资源中间件,加深了解服务器对文件请求的缓存策略

图4

如何获取服务器静态文件的路径?如果设置了根目录,就把请求地址的pathname拼在根目录后面,如果没有设置根目录,就把pathname直接当做文件路径。

手写一个静态资源中间件,加深了解服务器对文件请求的缓存策略

图5

当我们拿到文件路径后,需要判断这个路径是否真实存在?如果存在,它就有可能是文件夹,也有可能是文件,我们先处理是文件的情况。

手写一个静态资源中间件,加深了解服务器对文件请求的缓存策略

图6

此处我们直接使用mime这个包来设置content-type。

除了图5中处理文件夹的逻辑,还有当请求的路径最后一个字符是“/”时,也需要被当做文件夹处理。如果是文件夹,就需要设置文件夹下的默认文件,一般是index.html。

手写一个静态资源中间件,加深了解服务器对文件请求的缓存策略

图7

如图7所示,有两处需要处理文件夹,我们抽取一下逻辑。

手写一个静态资源中间件,加深了解服务器对文件请求的缓存策略

图8

options.index可以配置文件夹下默认的文件,类型是数组。如果找到一个存在的文件,就返回这个文件。那么图6中处理单个文件的逻辑和此处一致,可以抽取出来——hanleFile。

代码写到这里,我们的服务已经可以正常返回静态文件的内容了,但是我们还没有设置缓存响应头,下面我们继续开发。

手写一个静态资源中间件,加深了解服务器对文件请求的缓存策略

图9

如图9所示,我们设置了Cache-Control、Last-Modify和Etag响应头(etag的获取我们直接利用etag模块计算)。

当一个请求非第一次到达服务器,它有可能带着缓存信息,所以我们要判断文件缓存是否过期,如果没有过期,就返回304状态。

手写一个静态资源中间件,加深了解服务器对文件请求的缓存策略

图10

如图10,我们对比一下【Last-Modified,If-Modified-Since】和【ETag、If-None-Match】这两对请求响应头,这是文件内容是否变化的主要依据。

手写一个静态资源中间件,加深了解服务器对文件请求的缓存策略

图11

如图11,只要符合服务器的缓存策略(etag==if-none-match或者last-modified<=If-modified-since),就可以返回304状态。

实例

手写一个静态资源中间件,加深了解服务器对文件请求的缓存策略

图12

如图12所示,我们写个demo测试一下,效果如下:

动图请点此处

从上面的效果看,我们可以发现,第一次请求是200,第二次请求会变成304,说明缓存策略生效了,符合预期!

总结

这篇文章主要是把之前的理论变成能实际应用的代码,虽然还有很多地方需要打磨,但是主体逻辑已经成型,从中可以学习一下思路。

【编辑推荐】

  1. 使用 Python 远程登陆服务器的优秀实践
  2. 与程序员相关的CPU缓存知识
  3. 从未如此简单:5分钟搞懂 HTTP 缓存机制
  4. 使用消息中间件时,如何保证消息仅仅被消费一次?
  5. Redis 缓存雪崩、击穿、穿透
【责任编辑:武晓燕 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

 敏捷无敌之 Gitlab CI 持续集成

敏捷无敌之 Gitlab CI 持续集成

打破运维与研发壁垒
共5章 | KaliArch

96人订阅学习

秒杀高并发白话实战

秒杀高并发白话实战

主流高并发架构
共15章 | 51CTO崔皓

60人订阅学习

网络排障一点通

网络排障一点通

网络排障及优化调整案例
共20章 | 捷哥CCIE

470人订阅学习

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO官微