web前端缓存机制
前端缓存机制有多种，如浏览器缓存、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，你已经是最新的版本了
浏览器：好，那就可以使用本地缓存了
浏览器缓存机制
有dns的地方,就有缓存。浏览器、操作系统、Local DNS、根域名服务器，它们都会对DNS结果做一定程度的缓存。
DNS查询过程如下:
首先搜索浏览器自身的DNS缓存,如果存在，则域名解析到此完成。
如果浏览器自身的缓存里面没有找到对应的条目，那么会尝试读取操作系统的hosts文件看是否存在对应的映射关系,如果存在，则域名解析到此完成。
如果本地hosts文件不存在映射关系，则查找本地DNS服务器(ISP服务器,或者自己手动设置的DNS服务器),如果存在,域名到此解析完成。
如果本地DNS服务器还没找到的话,它就会向根服务器发出请求,进行递归查询。
浏览器本地缓存失效后，浏览器会向CDN边缘节点发起请求。类似浏览器缓存,CDN边缘节点也存在着一套缓存机制。CDN边缘节点缓存策略因服务商不同而不同，但一般都会遵循http标准协议，通过http响应头中的
Cache-control: max-age 的字段来设置CDN边缘节点数据缓存时间。
当浏览器向CDN节点请求数据时，CDN节点会判断缓存数据是否过期，若缓存数据并没有过期，则直接将缓存数据返回给客户端；否则，CDN节点就会向服务器发出回源请求，从服务器拉取最新数据，更新本地缓存，并将最新数据返回给客户端。 CDN服务商一般会提供基于文件后缀、目录多个维度来指定CDN缓存时间，为用户提供更精细化的缓存管理。
CDN 优势
CDN节点解决了跨运营商和跨地域访问的问题，访问延时大大降低。
大部分请求在CDN边缘节点完成，CDN起到了分流作用，减轻了源服务器的负载。
http请求报文（request）
请求行
请求方法 空格 URL 空格 协议版本 回车符 换行符
请求头（通用信息头、请求头、实体头）
头部字段名 冒号 值 回车键 换行符
...
头部字段名 冒号 值 回车键 换行符
空行
回车符 换行符
实体主体（只有post请求有）
主体
http响应报文（response）
状态行
协议版本 空格 状态码 空格 状态码描述 回车符 换行符
响应头部
头部字段名 冒号 值 回车符 换行符
...
头部字段名 冒号 值 回车符 换行符
空行
回车符 换行符
响应正文
正文
浏览器初次向服务器发起请求后拿到请求结果，会根据响应报文中HTTP头的缓存标识，决定是否缓存返回的结果，是则将请求结果和缓存标识存入浏览器缓存中
浏览器每次发起请求，都会现在浏览器缓存中查找该请求的结果以及缓存标识
浏览器 浏览器缓存 服务器
——————***次发起http请求——————
——没有该请求的缓存结果和缓存标识————
——————————————发起http请求——————————————
——————————返回该请求结果和缓存规则————————————
——将请求结果和缓存标识存入浏览器缓存——
强制缓存就是向浏览器缓存查找结果，并根据该结果的缓存规则来决定是否使用该缓存结果的过程
强制缓存的情况分为三种：
1、不存在该缓存结果和缓存标识，强制缓存失效，直接向服务器发起请求
2、存在该缓存结果和缓存标识，但结果已经失效，强制缓存失效，使用协商缓存
3、存在该缓存结果和缓存标识，且该结果没有失效，强制缓存生效，直接返回该结果
控制强制缓存的字段：Expires，Cache-Control
Expires 是 HTTP/1.0 控制缓存的字段，值为服务器返回该请求的结果缓存时间
即再次发送请求是，客户端时间 小于 Expires的值，直接使用缓存结果
Cache-Control 是HTTP/1.1的规则，主要用于控制网页缓存，主要取值为：
public：所有的内容都缓存（客户端和代理服务器都可以缓存）
private：所有内容只有客户端可以缓存（默认值）
no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定
no-store：即不使用强制缓存，也不使用协商缓存
max-age=xxx：缓存内容将在xxx秒后失效
Expires 是一个绝对值
Cache-Control 中 max-age 是相对值，解决了 Expires时期 服务端与客户端 可能出现时间差的问题
注：Expires和Cache-Control同时存在时，只有Cache-Control生效
协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程
协商缓存的两种情况：
1、协商缓存生效，返回304，继续使用缓存
过程：
浏览器 浏览器缓存 服务器
————————发起http请求————————
——该请求的缓存结果失效，只返回缓存标识——
————————携带该资源的缓存标识，发起http请求————————
—————————————304，该资源无更新————————————
——————获取该请求的缓存结果——————
——————返回该请求的缓存结果——————
2、协商缓存失败，返回200和请求结果
过程：
浏览器 浏览器缓存 服务器
————————发起http请求————————
——该请求的缓存结果失效，只返回缓存标识——
————————携带该资源的缓存标识，发起http请求————————
————————200，资源已更新，重新返回请求和结果———————
——将该请求结果和缓存标识存入浏览器缓存中—
协商缓存的标识也是在响应报文的HTTP头中和请求结果一起返回给浏览器的
控制协商缓存的字段：
(1) Last-Modified/If-Modified-Since：Last-Modified是服务器响应请求是，返回该资源文件在服务器最后被修改的时间；If-Modified-Since再次发起请求时，携带上次返回的Last-Modified的值，服务器将该字段值与该资源最后修改时间对比，决定是否用缓存
(2)Etag/If-None-Match：Etag服务器响应请求时，返回当前资源文件的一个唯一标识，由服务器生成之；If-None-Match是再次发起请求时，携带上次返回的唯一标识Etag的值，服务器收到后，将该字段值与该资源在服务器上的Etag对比，一致 则返回304，否则返回200
注：Etag/If-None-Match优先级高于Last-Modified/If-Modified-Since，同时存在时只有Etag/If-None-Match生效
浏览器缓存分为：内存缓存 和 硬盘缓存
内存缓存特性：
(1)快速读取：内存缓存会将编译解析后的文件，存入该进程的内存中，便于下次运行时快速读取
(2)时效性：一旦关闭进程，进程内存清空
硬盘缓存特性：
永久性：直接写入硬盘文件中
复杂、缓慢：读取缓存对该缓存存放的硬盘文件进行I/O操作，重新解析
from memory cache：使用内存中的缓存
from disk cache：使用硬盘中的缓存
浏览器读取顺序：memory —— disk
浏览器将js和图片等文件解析执行后直接存入内存缓存中，F5刷新页面时，from memory cache(使用内存中的缓存)
css文件存入硬盘中，F5刷新页面时，from disk cache(使用硬盘中的缓存)
参考文章
关于浏览器缓存
首先浏览器缓存分为 内存缓存 和 文件缓存 。
内存缓存是浏览器自己控制的，不受 Cache-Control 影响，跟计算机内存空间大小有关，并且关闭浏览器就会消失。
文件缓存 就是我们常说的浏览器缓存。
文件缓存分为2种： 强制缓存 和 协商缓存 。
强制缓存 就是通过Header上配置Cache-Control:public,max-age=300这种形式实现的，Cache-Control可以客户端在请求Header配置，也可以服务端在响应Header配置。
强制缓存 比较适合用在变化频率比较低的文件上，比如图片，js，css都可以，通常我们都使用这种缓存再配合文件hash后缀实现缓存文件的即时更新。
协商缓存 是一种服务端控制文件缓存的策略，机制是服务端会根据最新更改时间和文件标识判断响应的时候是否要返回内容。虽然每次都会向服务端发起请求，但是如果服务端确定缓存，会返回很少响应内容。
这种方式比较适合需要频繁更新的文件，需要配合Cache-Control:no-cache阻止强制缓存。另外html不要配置强制缓存，通常我们请求的html文件地址不会加hash。
协商缓存 主要通过2组Header标签让客户端与服务端确认来达成：首先服务端在响应的时候会加上 Last-Modified 和 Etag ，前者表示文件最后更新时间，后者表示文件唯一标识；然后客户端再次请求的时候会带上 If-Modified-Since 和 If-None-Match ，值分别跟服务端的 Last-Modified 和 Etag 一致。
参考：
浏览器缓存
关于浏览器缓存机制和浏览器缓存机制与nginx的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。