浅谈web缓存 | node建站笔记之静态资源的动态刷新

在站点的开发时期，经常会有资源的刷新情况，比如更新了一个js脚本，或者更新了一个css样式表，那么如果服务器设置的缓存周期太长，客户端想要看到效果就需要按F5强制刷新。

有没有能够让客户端懂事一点，自动知道服务端资源的更新情况呢，那就是设置url后缀版本号。我们经常可以看见，一个静态资源的链接后面带一个长长的参数，通常是一串神秘数字，这就是资源的版本号，当服务器端返回的html文件中所需要的静态资源版本号发生变化时，客户端便不再使用本地缓存，而是再次向服务器端请求资源，这样就可以获得新的资源。

服务器端如何设置

方法还是有挺多的，网上有挺多开源插件可以方便地直接调用，但是在开发博客的时候，我的一个小理念就是不太复杂或者必要性不太强的部分就尽量不用插件。那么该如何设置版本号呢，只要两步

第一步在调用渲染模板的路由分发函数中传入一个时间戳变量
第二部在渲染页面将时间戳拼接在静态资源的url后面

可能描述地不是很清楚。比如我有一个creatArticl的路由分发函数，我们给creat渲染模板传入一个sst变量

exports.createArticle = (res, req) =>{
    // 其他代码
    res.render("create", {
        //其他变量
        "sst": new Date().getTime();
    });
};

然后在create渲染模板中将变量sst拼接到url后面作为版本号

extends layout
block head_content
  title= "写文章 | " + site.title 
  link(rel="stylesheet", href="/stylesheets/create.css?t="+sst)

之后在重启node服务，便可以在客户端看到刷新完的资源

这里是将服务器的时间戳作为版本号，因为它是最简单最容易获取的，当然还有很多其他的特征值可以作为静态的资源的版本号，只是对于我这个小博客来说，这种方法已经够用了，感兴趣的朋友可以上网查下其他的方法。

前端的缓存机制

前面说的这些东西都离不开缓存的概念，所以自己现在梳理一下这几天学到的一些东西。

缓存的种类

我所知道的有数据库缓存，代理服务器缓存，cdn，浏览器缓存。我们平常接触和使用比较多的也就是浏览器缓存。

数据库缓存是针对一些查询频率比较高的数据表，将其取出放在内存中，当服务器接收到客户端的请求时，直接将内存中的数据发送，节省了查询数据表的时间，尤其是当表中有大量数据的时候，每次查询都要耗费一定时间，所高并发的状态下数据库缓存也是非常重要的。

然而对于我们这种小站来说，并不需要，，，一小时能有几个访问量。代理服务器缓存和cdn我一直搞不清楚他们的区别，暂时不介绍与追查，以后有接触了再看，如果有dalao懂的话，欢迎评论区指教。

浏览器缓存顾名思义就是将资源缓存在浏览器内啦，下面着重介绍浏览器缓存

浏览器缓存的四个参数

以下内容部分摘抄于浅谈web缓存

页面的缓存状态是由header决定的，header的参数有四种，分别为

Cache-Control
Expires
Last-modified
ETag

其中，Cache-Control中又有一些参数，最熟悉的就是max-age 指定设置缓存最大的有效时间，定义的是时间长短。当浏览器向服务器发送请求后，在max-age这段时间里浏览器就不会再向服务器发送请求了。

然后还有一个s-maxage 同和max-age一样的用法，不过只s-maxage用于共享缓存，比如CDN缓存。

public 与 private ：前者表示共享缓存，后者表示私有缓存。共享缓存的意思就是，大家都可以一起用，比如cdn上面的缓存，至于私有缓存是个什么情况，还不清楚。

no-cache 与 no-store ：no-cache 指定不缓存响应，表明资源不进行缓存，绝对禁止缓存顾名思义，每次请求资源都要从服务器重新获取。

Expires：资源过期时间，其实效果和max-age 差不多，都是用来说明资源什么时候过期的，Expires=max-age + 请求时间

Last-modified ：服务器端文件的最后修改时间，需要和cache-control共同使用，是检查服务器端资源是否更新的一种方式。当浏览器再次进行请求时，会向服务器传送If-Modified-Since报头，询问Last-Modified时间点之后资源是否被修改过。如果没有修改，则返回码为304，使用缓存；如果修改过，则再次去服务器请求资源，返回码和首次请求相同为200，资源为服务器最新资源。

ETag：根据实体内容生成一段hash字符串，标识资源的状态，由服务端产生。浏览器会将这串字符串传回服务器，验证资源是否已经修改，如果没有修改，过程如下