前端静态资源反向代理加缓存可以减轻服务器带宽压力吗

可以的，前端静态资源反向代理加缓存可以有效减轻服务器的带宽压力。反向代理可以缓存资源，当客户端请求服务器时，它可以错开主服务器的请求，这样就能够有效减少带宽压力。同时，缓存也可以提高系统的响应速度，进一步减轻冗余请求对服务器的压力

前端缓存机制有多种，如浏览器缓存、CDN缓存、DNS缓存、代理服务器缓存等。

CDN全称是Content Delivery Network，即内容分发网络。CDN的原理是将资源存放在各地的缓存服务器上，当用户请求资源时，从就近的服务器上返回缓存的资源，而不需要每次都从源服务器获取，减轻源服务器的压力，又能提升用户的访问速度。

浏览器可以将用户请求的资源进行缓存，存放在本地。浏览器缓存一般通过请求头来设置。

与浏览器缓存有关的头部有：

浏览器会将服务器的域名与IP地址的映射缓存在本地，这样用户在访问网站时，不用每次都去查询DNS映射表。

在浏览器和服务器之间架设的一个服务器 ，这个代理服务器会帮助浏览器去请求页面，然后将页面进行处理和压缩(例如压缩图片和文件)，使页面变小，再传输给浏览器。大部分代理服务器都有缓存的功能，如果浏览器所请求的文件在它本机中存在且是最新的，就不需要再从源服务器请求数据，提高了浏览速度。

在浏览某个页面时，浏览器会判断页面的关联内容，进行预加载。用户在浏览A页面时，就加载好B页面，这样当用户去访问B页面时，B页面很快就出来，提升了用户体验。但这个机制有一定的缺陷，就是预判不一定准确，可能会造成流量和资源的浪费。

在前端开发中，性能是一个永恒的话题，没有最好，只有更好。判断一个网站性能好坏，一个直入眼观的即是网页的反应速度，有一个方式就是使用缓存，一个优秀的缓存策略可以缩短网页请求的时间，减少延迟，并且网页可以重复利用，还可以减少带宽，降低网络负荷。

1： 为什么需要缓存？

a：缓存可以减少用户等待时间，提升用户体验

b：减少网络带宽消耗

c：降低服务器压力

Note：缓存使用不当，也会造成‘脏数据’问题

2：常见的缓存类型

强缓存 -

Expires服务器端设置，表示该资源的过期时间，会有弊端，客户端时间和服务器时间不一致的问题。

Cache-Control：max-age表示缓存资源的最大生命周期，单位是秒

所以Expires 结合 Cache-Control 一起使用，大型网站中一般比较适用

协商缓存-

Last-Modified：值为资源的最后更新时间，随服务器response返回

If-Modified-Since：通过比较两个时间来判断资源在两次请求期间是否有过修改，如果没有，则命中协商缓存

Etag：表示资源内容的唯一标识，即资源的消息摘要

If-None-Match：服务器通过比较请求头中的If-None-Match与当前资源的Etag是否一致来判断资源是否在两次请求期间有过修改

3：缓存流程图示：

a：浏览器会先检测强缓存类型（Cache-Control 或者 Expires）是否有效；命中直接浏览器本地获取缓存资源

b：未命中。服务器会根据请求头Request Header验证这个资源是否命中协商缓存，称之为HTTP二次验证，命中，服务器返回请求，但返回资源，而是告诉客户端直接中直接从浏览器缓存中获取

Note：

1.强缓存不会发生请求，协商缓存存在服务器请求

2.当协商缓存也未命中时，则服务器会将资源发送到客户端

3.F5刷新页面，会跳过强缓存

4.Ctrl+F5刷新页面，跳过强缓存和协商缓存

5.不会缓存的情况

HTTPS POST请求 根据Cookie获取认证信息 Request Header Cache-Control：no-cache， max-age=0

6.小故事大道理

上文对整个概念做了阐述，还是不够形象，我们来通过几个小故事生动理解一下：

故事一：Last-Modified

浏览器：Hi，我需要 jartto.min.js 这个文件，如果是在 Last-Modified: Fri Feb 15 2019 19:57:31 GMT 之后修改过的，请发给我。

服务器：（检查文件的修改时间）

服务器：Oh，这个文件在那个时间之后没有被修改过，你已经有最新的版本了。

浏览器：太好了，那我就显示给用户了。

故事二：ETag

浏览器：Hi，我需要 jartto.css 这个文件，有没有不匹配 3c61f-1c1-2aecb436 这个串的

服务器：（检查 ETag…）

服务器：Hey，我这里的版本也是 3c61f-1c1-2aecb436，你已经是最新的版本了

浏览器：好，那就可以使用本地缓存了

---