大家好，我是讯享网，很高兴认识大家。



文章目录

• 搭建本地服务器

• 安装必要的包
• 开始搭建服务器

• 请求html文件
• nodejs图片请求返回
• js文件请求返回
• 最终结果

• 设置缓存

• 如何查看网络请求
• 缓存策略

• 1.0 时代：基于Pragma&Expires的缓存实现

• Pragma
• Expire

• 1.1时代：Cache-Control:相对过期时间

• 协商缓存
• 缓存过期机制
• 强制缓存
• 缓存权限设置

• 挑战1：nodejs自己设置Last-Modified的响应
• 挑战2：设置返回304和200的情况

• ETAG和last-modefied的区别

• 总结

• 学习缓存机制的用处？

搭建nodejs服务器

这里搭建一个监听所有请求的方法，都会返回

讯享网

请求html文件

我们知道所有访问都是通过输入实现的，所以这些都是，我们只需要判断浏览器发出的请求的参数，以此来判断返回什么样的东西。

对象保存就是请求数据，我们输出看看有什么。

有很多，具体大家可以去看看官方文档,里面有详细介绍请求对象和返回对象的属性方法。

这里不再赘叙，直接使用来判断请求数据。

我们这里先建立一个简单的

然后在添加访问路径

nodejs图片请求返回

的确返回了html文件，但是没有图片出现了问题。
是因为获取图片也是用过个请求获取的，所以同样要对所有的图片进行判断返回。
因为图片格式都是固定的，所以可以统一处理。

这里使用正则判断请求路径是否为图片，如果是则返回对应文件。
这里记得设置路径是相对于这个目录下的，所以需要适当的调整，具体看你的路径如何放。
也使用了来捕捉错误，一但访问文件不存在就返回

js文件请求返回

同理，也是默认请求的，我们用相同方法来进行设置。

最终结果

如何查看网络请求

在设置缓存头前，我们需要了解下如何查看请求的。

按进入控制台，找到，点击左上角的黑色按钮，或者使用快捷键，等待几秒就可以看到请求啦。

缓存策略

缓存机制这个是所有web开发默认的规划协议，不同世界，不同语言的前端开发者都可以通过阅读响应头来得知该文件的缓存机制。
所有的服务器都可以阅读请求头中携带的缓存头信息来进行响应。
目前所有的服务器框架都已经封装好了这部分的功能，开发者使用的时候并不用担心这些设置，一般都会采用最优的缓存策略。

• Express的缓存策略
  如中的图片缓存机制，采用的询问机制，避免了文件修改而客户端不知情，也避免了过期时间到了，但是文件还没有修改过，重新下载文件的请求浪费。
  对于这种修改比较经常的文件则一般都是不缓存的，除非你特别的需求，你也可以通过设置响应头来使这些缓存保存到客户端本地去。（这里就体现了学习缓存策略的作用了）

缓存的存在大大减少了网络重复请求的冗杂性，给服务器降低了很多负担。

从进化到,实现了能够使用缓存到更加灵活地使用缓存的进化。

1.0 时代：基于Pragma&Expires的缓存实现

参考资料

Pragma

Expire

有了Pragma来禁用缓存，自然也需要有个东西来启用缓存和定义缓存时间。

对http1.0而言，Expires就是做这件事的首部字段。Expires的值对应一个GMT（格林尼治时间），比如“Mon, 22 Jul 2002 11:12:01 GMT”（相当于·中的）来告诉浏览器资源缓存过期时间，如果还没过该时间点则不发请求。

在客户端我们同样可以使用meta标签来知会IE（也仅有IE能识别）页面（同样也只对页面有效，对页面上的资源无效）缓存时间：

1.1时代：Cache-Control:相对过期时间

针对上述的“Expires时间是相对服务器而言，无法保证和客户端时间统一”的问题，http1.1新增了 Cache-Control 来定义缓存过期时间。

若报文中同时出现了 和，会以为准。换言之，这三者的优先级顺序为:

其实已经包含了的2个语段的功能。

作为请求首部时，值可能有：

协商缓存

HTTP/1.1定义的 用来区分对缓存机制的支持情况， 请求头和响应头都支持这个属性。通过它提供的不同的值来定义缓存策略。

• 框架下的默认情况（对比缓存/协商缓存） 对于图片来说，默认情况都是的，并且后续的缓存会向服务器确认图片是否发生更新，如果是则更新缓存，否就会返回一个状态码’304 no modfie’
  我们不对图片进行处理，只是设置静态文件共享来测试看看。

1. 第一次请求
2. 第二次请求如果服务器没有更新，则直接使用缓存。

缓存过期机制

表示该文件修改的日期，会和服务器的文件进行比较，如果到了过期时间，但是文件依然没有改变，依旧发送请求的话就可能造成没必要的·，这里就可以先发送一个，询问文件是否修改，如果，否则的话就

强制缓存

Created with Raphaël 2.2.0 浏览器开始访问 找到对应的缓存文件 缓存验证 是否过期？ 请求服务器更新缓存文件 使用缓存文件 yes no 

讯享网

• no-cache：不使用本地缓存。需要使用缓存协商，先与服务器确认返回的响应是否被更改，如果之前的响应中存在ETag，那么请求的时候会与服务端验证，如果资源未被更改，则可以避免重新下载。
• no-store：直接禁止浏览器缓存数据，每次用户请求该资源，都会向服务器发送一个请求，每次都会下载完整的资源。
• public：可以被所有的用户缓存，包括终端用户和CDN等中间代理服务器。
• private：只能被终端用户的浏览器缓存，不允许CDN等中继缓存服务器对其缓存。

缓存权限设置

挑战1：nodejs自己设置Last-Modified的响应

挑战2：设置返回304和200的情况

中就有一个API专门询问请求头信息

我们直接修改图片，并且调用看看输出情况：

• 第一次访问，输出情况：



• 耗时：



• 第二次访问



• 耗时：



• 浏览器能够识别，自动使用缓存，图片正常显示。
• 第三次访问，修改文件

ETAG和last-modefied的区别

• Etag：web服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识（生成规则由服务器决定）。
• last-modefied：保存的是文件修改的事件，性能优于Etag

学习缓存机制的用处？

1. 通过缓存的学习,我们能够了解缓存的机制是如何运行的,能够通过认识每一个请求头和响应头缓存信息。
2. 框架会自然的封装默认的缓存机制，但是我们具体开发过程中对于一些特别的文件，需要特别的缓存的时候，我们就可以自己特定地设置这些缓存机制，提高性能。
3. 从HTTP1.0开始，缓存的出现大大减低的服务器的负担，同时也需要一个协议来规定浏览器和服务器直接的信息交流。如：304浏览器会识别自动浏览并且使用缓存文件，服务器可以阅读请求头的来判断文件是否最新等。缓存只是一种开发者都默认和遵守的协议，我们每一个前端开发者都需要学习和了解它为何出现，为何要这样设计，如何来使用它。
4. 这里使用到的响应头只有一个，代表每次请求该文件都会发送一个请求到服务器，服务器会根据请求头的信息来判断如何响应。其他的响应头设置你们可以阅读参考资料来学习，最好通过自己一个一个来测试，比如如果设置了的话，是无效的，因为文件压根不会保存到缓存去。还有设置了就不能设置等限制。