如何利用node实现静态文件缓存详解

缓存

浏览器缓存(brower caching)是浏览器对之前请求过的文件进行缓存，以便下一次访问时重复使用，节省带宽，提高访问速度，降低服务器压力

缓存位置分类

memory cache:内存中的缓存,关闭浏览器则清空，一般存储一些js库

disk cache：硬盘中的缓存，关闭浏览器不会马上清空，一般存储大文件，比如 图片资源，iconfont这类的图标文件库

两者的区别：

  1. 读取速度 ：memory cache缓存的是当前解析过了的文件在浏览器tab进程里，下次运行使用时的可以快速读取；

              disk cache直接将缓存写入硬盘文件中，读取缓存需要对该缓存存放的硬盘文件进行i/o(读取)操作，然后重新解析缓存内容，速度比内存缓存慢

  2. 时效性：memory cache是存在tab的进程里，tab关闭，则清空；

            disk cache：被清空的时机我还不知道（希望有人可以补充）

  3. 优先级：memory cache大于disk cache

  对于大文件来说，大概率是不存储在memory中的，反之优先，代码角度目前好像也无法控制浏览器缓存位置

缓存设置header

cache-control

 1.   cache-control：max-age=10//10秒内重新发的请求都直接命中强缓存，无需向服务器发起请求，读取浏览器缓存即可
 2.   cache-control：no-cache //禁止强制缓存，每次都向服务器发起请求，同时也会存在浏览器缓存中 （走协商缓存了基本）
 3.   cache-control：no-store //每次都请求服务器，且不缓存在浏览器中，等同于没有缓存 
复制代码

expires：

兼容低版本浏览器,这个就是设置绝对时间，获取的是服务器的当前时间和浏览器当前时间做比对（通常存在偏差，是http1.0的产物），和 cache-control同时存在时，cache-control优先级更高

• last-modified：协商缓存的时候用 和if-modified-since，成对出现；if-modified-since请求头的值对应上一次服务器的响应头last-modified的值，拥有提供服务器比对请求资源修改时间，相等，则命中协商缓存返回304，浏览器读取缓存即可
• etag：资源标识（也有说时指纹，通常是一个md5值），协商缓存时候用，比较文件是否修改；和if-none-match 成对出现

etag主要为了解决 last-modified 无法解决的一些问题。

1. 一些文件也许会周期性的更改，但是他的内容并不改变(仅仅改变的修改时间)，这个时候我们并不希望客户端认为这个文件被修改了，而重新get;

2. 某些文件修改非常频繁，比如在秒以下的时间内进行修改，(比方说1s内修改了n次)，if-modified-since无法检查到如此精细

3. 某些服务器不能精确的得到文件的最后修改时间；

4.etag与last-modify同时存在 etag优先级比较

实际项目：html不允许缓存，html里引用的js有唯一的版本号做依据，再次访问的时候 访问最新的html，引用的js或其他文件版本号未修改则直接用本地缓存

node实现静态文件缓存

文件结构

public对应我们测试用的静态资源

强缓存

思路

• 创建服务
• 首次请求 解析请求路径， fs.createreadstream().pipe() 读取文件
• 设置响应头cache-contro：max-age=10 强缓存的相对时间

代码实现

效果展示

协商缓存

成功

思路

• 创建服务
• 首次请求 解析请求路径， fs.createreadstream().pipe() 读取文件
• 设置响应头last-modified 返回浏览器
• 再次请求，比较浏览器if-last-modified 和当前资源修改时间，相等则命中协商缓存，返回响应码304，反之返回路径对应的最新资源，和响应码200

代码实现

效果展示

每次刷新页面都会执行  console.log(req.url); 请求了服务器但服务器返回304 命中协商缓存 浏览器直接读取缓存资源即可

成功

总结

到此这篇关于如何利用node实现静态文件缓存的文章就介绍到这了,更多相关node静态文件缓存内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！