web前端缓存机制

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

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

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

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

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

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

网上查了下资料，回源大致是指浏览器在发送请求报文时，响应该请求报文的是源站点的服务器，而不是各节点上的缓存服务器，那么这个过程相对于通过各节点上的缓存服务器来响应的话就称作为回源。回源的请求或流量太多的话，有可能会让源站点的服务器承载着过大的访问压力，进而影响服务的正常访问。

其实回源比和缓存的命中率正好相反，回源比高，说明缓存系统的缓存命中率低。回源比分为回源请求数比例和回源流量比例两种。
回源请求数比例 ：收集所有边缘节点上的请求记录，没有缓存或缓存过期的请求以及不可缓存的请求均被作为回源请求，发往源站点服务器响应。其他的请求则由缓存系统直接使用缓存响应。其计算公式为： 回源请求数/（回源请求数+用户发送的请求数） 。
回源流量比 ：即用户所产生的流量当中，有多少流量是直接有源站点服务器响应的，其计算公式为： 回源流量/（回源流量+用户请求访问的流量）

CDN，即Content Delivery Network，内容分发网络，其搭建的思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，尽量使内容传输的更快更稳定。CDN通过在网络边缘部署边缘服务器，依靠CDN中心平台的负载均衡、内容分发及调度等功能，使用户就近获取所需的内容，降低网络拥堵，提高用户访问响应速度和命中率。所以基本上CDN就是广泛采用各种缓存服务器，使得用户的请求直接由这些缓存服务器响应，加快了响应速度；只有在用户请求的资源在缓存服务器上没有找到或者请求访问的资源在源站点服务器上已经修改过的情况下，缓存服务器才会去访问源站点服务器以获取最新的资源。
下图为常见的CDN架构：

在CDN环境下，web访问数据通常会经历客户端本地缓存和CDN边缘节点缓存两个阶段。如果这两个阶段均无法响应客户的请求的话，那么最后会由CDN节点向源站点发起回源请求，进而从源站点获取最新的数据，更新CDN节点的本地缓存，最后将最新的数据返回给客户端。
CDN节点的缓存机制也是遵循>

在前端开发中，性能一直都是被大家所重视的一点，然而判断一个网站的性能最直观的就是看网页打开的速度。 其中提高网页反应速度的一个方式就是使用缓存 。缓存技术一直一来在WEB技术体系中扮演非常重要角色，是快速且有效地提升性能的手段。

一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。

所以，缓存技术是无数WEB开发从业人员在工作过程中不可避免的一大问题。 在产品开发的时候我们总是想办法避免缓存产生，而在产品发布之时又在想策略管理缓存提升网页的访问速度 。了解浏览器的缓存命中原理，是开发WEB应用的基础，本文着眼于此，学习浏览器缓存的相关知识，总结缓存避免和缓存管理的方法，结合具体的场景说明缓存的相关问题。希望能对有需要的人有所帮助。

在实际WEB开发过程中，缓存技术会涉及到不同层、不同端，比如：用户层、系统层、代理层、前端、后端、服务端等， 每一层的缓存目标都是一致的，就是尽快返回请求数据、减少延迟 ，但每层使用的技术实现是各有不同，面对不同层、不同端的优劣，选用不同的技术来提升系统响应效率。所以，我们首先看下各层的缓存都有哪些技术，都缓存哪些数据，从整体上，对WEB的缓存技术进行了解，如下图所示：

本篇文章重点讲的就是上面红色框部分缓存内容。

当浏览器请求一个网站的时候，会加载各种各样的资源，比如：HTML文档、、CSS和JS等文件。对于一些不经常变的内容，浏览器会将他们保存在本地的文件中，下次访问相同网站的时候，直接加载这些资源，加速访问。

那么如何知晓浏览器是读取了缓存还是直接请求服务器？如下图网站来做个示例：

第一次打开该网站后，如果再次刷新页面。会发现浏览器加载的众多资源中，有一部分size有具体数值，然而还有一部分请求，比如、css和js等文件并没有显示文件大小，而是显示了 from dis cache 或者 from memory cache 字样。这就说明了，该资源直接从本地硬盘或者浏览器内存读取，而并没有请求服务器。

浏览器启用缓存至少有两点显而易见的好处： （1）减少页面加载时间；（2）减少服务器负载；

浏览器是否使用缓存、缓存多久，是由服务器控制的 。准确来说，当浏览器请求一个网页（或者其他资源）时， 服务器发回的响应的「响应头」部分的某些字段指明了有关缓存的关键信息 。下面看下，>