NodeJS -- 浏览器缓存机制

秒速五厘米 2022-01-30 09:47 302阅读 0赞

[浏览器缓存机制][Link 1]

上面是浏览器的缓存机制，如果不清楚的小伙伴可以去瞧瞧。

我们来简单用代码试试。

协商缓存

我们先试一下协商缓存的last-modified

我们简单的使用http协议创建一个服务器，然后在public目录下面存放一些资源（一个html,一个css)。我们访问html文件。

我们使用Last-modified属性，保存的是html文件最后的修改的时间.toUTCString()，浏览器知道我们的响应请求头里面有Last-Modified属性，那么下一次发送请求时就会带上一个If-Modified-Since属性，值就是上一次的服务器返回的。那么服务器就应该用当前的文件最后的修改的时间.toUTCString()与它匹配，如果相等，那么我们就只需要返回304，不相等就返回当前最新的文件，并且发送Last-Modified

我们试试看，访问index.html

第一次访问：![20190519003553902.png][]

第二次访问：![20190519003636962.png][]

修改html文件，保存，然后访问：![20190519003748785.png][]

下面我们介绍ETag字段，不过在此之前，我们必须要先想想为什么还需要ETag字段，前面Last-Modified字段感觉已经很完美了。

1：使用Last-Modifie的前提在于，我们可以精确的获取的文件的修改时间，如果这一点出现问题那么就根本行不通了。

2：文件的内容并没有发生改变（我删除了一个字母，然后又加上，重新保存），这样也会导致文件修改时间改变。

3：![20190519102647809.png][]文件修改时间的单位是精度是秒，而当修改过于频繁，在秒一下单位修改，那么就会导致文件已经修改但是修改时间没有变

4：如果了解CDN服务器的小伙伴的同学知道，CDN服务器缓存了一下静态资源，但是每一个CDN服务器保存的文件修改时间不一样（因为CDN服务器还是需要请求总的服务器资源，这就导致不同的服务器会有不同的文件修改时间），同样的文件在不同的CDN服务器上面又不同的文件最后修改时间，那么就会导致Last-Modified字段没有作用。

ETag字段是保存的一个文件的摘要（通过hash函数计算出来的，只要你的文件改动了那么这个值肯定就不一样，比如md5)

第一次访问：![20190519113619282.png][]

第二次访问：![20190519113655334.png][]

强制缓存

接下来试试Cache-Control的字段。通过上面的协商缓存，我们了解到协商缓存都需要与服务器进行一次通信，那么为了更加减少这次通信，我们有了强制缓存。

Cache-Control字段

*  public：所有内容都将被缓存（客户端和代理服务器都可缓存）
 *  private：所有内容只有客户端可以缓存，Cache-Control的默认取值
 *  no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定
 *  no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存
 *  max-age=xxx (xxx is numeric)：缓存内容将在xxx秒后失效

我们试试max-age值。

我们在HTML里面引入了一个图片。

第一次：![20190519131907467.png][]

第二次：![20190519131930615.png][]

Expires是HTTP1.0内容，通过上面的博客，你应该知道这个字段的缺陷和与Cache-Control的区别。如果浏览器默认为HTTP1.1，所以我就不演示了。

[Link 1]: https://juejin.im/entry/5ad86c16f265da505a77dca4
[20190519003553902.png]: /images/20220130/156bff4a6bef4d4595364a259d9298c0.png
[20190519003636962.png]: /images/20220130/f8a52e84a47f42e9bbb0882fc598acb9.png
[20190519003748785.png]: /images/20220130/7ea13d8e91264c5c82e6baf3c95dde90.png
[20190519102647809.png]: /images/20220130/8c3c3dddd6bc48ecaf17e5bb57cf5977.png
[20190519113619282.png]: /images/20220130/f4df67c5d90145d3aa1a396ab6cfb87a.png
[20190519113655334.png]: /images/20220130/04392c09e22440e1a6cf859255181ec5.png
[20190519131907467.png]: /images/20220130/bad32f49d7ba496c858a2e0fce1c6253.png
[20190519131930615.png]: /images/20220130/fbee997a9ebe40cb86b5146a2b4a66c4.png