网络缓存

我们在平时在网络面板中经常看到很多请求，然后里面有一些from memory cache与from disk cache到底表示什么意思哪？

image.png

三级缓存原理

1、先查找内存，如果内存中存在，从内存中加载；
2、如果内存中未查找到，选择硬盘获取，如果硬盘中有，从硬盘中加载；
3、如果硬盘中未查找到，那就进行网络请求；
4、加载到的资源缓存到硬盘和内存；

200 form memory cache： 不访问服务器，从内存中读取，关闭浏览器后，数据就会被删除
200 from disk cache： 不访问服务器，从内存中读取，关闭浏览器后，数据不会删除
304 Not Modified：访问服务器，发现数据没有更新。从缓存中读取数据

image.png

为什么使用缓存

缓存可以提升应用的性能

1. 客户端

• 减少网络通信可以减少流量的消耗
• 减少等待时间，提升了响应时间
• 无网时更好的用户体验

2. 服务器端

• 数据库缓存可以减少文件系统I/O
• 应用程序缓存->减少对数据库的查询比如redis

浏览器缓存

我们习惯将缓存分为强缓存和协商缓存两种。两者的主要区别是使用本地缓存的时候，是否需要向服务器验证本地缓存是否依旧有效。顾名思义，协商缓存，就是需要和服务器进行协商，最终确定是否使用本地缓存

第一次请求：

image.png

强制缓存

image.png

强缓存主要是通过 http 请求头中的 Cache-Control 和 Expire 两个字段控制。Expire 是 HTTP1.0 标准下的字段，Cache-Control是HTTP 1.1标准下的字段。

1. Expires是一个时间戳， 当客户端再次请求该资源的时候，会把客户端时间与该时间戳进行对比，如果大于该时间戳则已过期，否则直接使用该缓存资源(from memory cache)。

2. cache-control: 一般，我们会设置 Cache-Control 的值为 “public, max-age=xxx”，表示在xxx秒内再次访问该资源，均使用本地的缓存，不再向服务器发起请求。

优先级 cache-control > expires

但是强制缓存存在一个问题如果在xxx秒内，服务器上面的资源更新了，客户端在没有强制刷新的情况下，看到的内容还是旧的。如果说你不着急，可以接受这样的，那是不是完美？然而，很多时候不是你想的那么简单的，如果发布新版本的时候，后台接口也同步更新了，那就gg了。有缓存的用户还在使用旧接口，而那个接口已经被后台干掉了。怎么办？

image.png

协商缓存

image.png

image.png

协商缓存简单的说就是客户端和服务器间就是否要使用缓存在做协商。如果协商的结果是需要更新就会返回200并返回更新内容。如果不需要只需要返回状态码304不用返回内容这样虽然需要后端应答但是后端既不需要生成内容也不需要传输内容。依然可以享受缓存的种种好处。

1. last-modified 与 if-modified-since 过协商修改时间为基础的策略,但是由于last-modified的精确度是秒，所以会存在误差。

• 200情况下

  
  
  image.png

• 304情况下

  
  
  image.png

2. etag 与 if-None-Match 另一种办法通过内容修改协商，将返回内容进行hash

• 200

  
  
  image.png

• 304

image.png

etag如何计算出来的

不同的服务器有不同的实现方式,一般来说Etag 的优先级高于 Last-Modified。

1. Nginx 官方默认的 ETag 计算方式是为"文件最后修改时间16进制-文件长度16进制"。
2. Express 有两种方式 1.使用文件大小和修改时间 2. 使用文件内容的hash值和内容长度

总结

浏览器先判断强制缓存(cache-control,expires),再去判断协商缓存(etag, last-modified)

image.png

最佳实践

如何在资源变更的第一时间让用户获取到最新资源？那就是在版本变更后更换了静态资源的路径，这样就相当于用户第一次访问了。我们知道webpack允许我们在打包的时候给文件名加上hash值。

webpack中的hash,chunkhash,contenthash分别是什么意思？

hash

webpck5之后改为fullhash

image.png

表示整个项目的hash，所有文件的hash值相同，修改一个文件，所有文件的hash值发生变化

image.png

chunkhash

根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的hash值。

image.png

image.png

修改chunk1文件内容,只有chunk1的hash值发生了变化

image.png

contenthash

由文件内容产生的hash值，内容不同产生的contenthash值也不一样。比如我们的js文件里引入了css,当css发生变化时我们不想让js文件的hash值也发生变化，这时我们就可以使用contenthash

如果是使用chunhash的话，index.js 与css的hash值是一样的修改那个文件都会重新生成另外一个的hash值

image.png

image.png

使用contenthash

image.png

两个文件hash值不同了，这时我们修改index.js文件

image.png

我们可以看到只有index.js文件的hash值发生了变化

如何搭建一个静态服务器

• nginx
• node
• apache
• cdn

Playground

https://github.com/zhangyifei007/http-cache-demo