新手学习Web前端开发时，对Web缓存的知识点较难理解，尚小萌针对Web缓存相关知识整理了以下内容：
一概念Web缓存是指一个Web资源(如html页面，图片，js，数据等)存在于Web服务器和客户端(浏览器)之间的副本。
缓存会根据进来的请求保存输出内容的副本；当下一个请求来到的时候，如果是相同的URL，缓存会根据缓存机制决定是直接使用副本响应访问请求，还是向源服务器再次发送请求。
比较常见的就是浏览器会缓存访问过网站的网页，当再次访问这个URL地址的时候，如果网页没有更新，就不会再次下载网页，而是直接使用本地缓存的网页。
只有当网站明确标识资源已经更新，浏览器才会再次下载网页。
二web缓存的作用减少网络带宽消耗：
当Web缓存副本被使用时，只会产生极小的网络流量，可以有效的降低运营成本。
降低服务器压力：
给网络资源设定有效期之后，用户可以重复使用本地的缓存，减少对源服务器的请求，间接降低服务器的压力。
同时，搜索引擎的爬虫机器人也能根据过期机制降低爬取的频率，也能有效降低服务器的压力。
减少网络延迟：
加开页面打开速度。
三web缓存的类型在Web应用领域，Web缓存大致可以分为以下几种类型：
.1、数据库数据缓存
Web应用，特别是SNS类型的应用，往往关系比较复杂，数据库表繁多，如果频繁进行数据库查询，很容易导致数据库不堪重荷。
为了提供查询的性能，会将查询后的数据放到内存中进行缓存，下次查询时，直接从内存缓存直接返回，提供响应效率。
比如常用的缓存方案有memcached等。
.2、服务器端缓存
服务器端缓存包含代理服务器缓存和CDN缓存:
.2.1、代理服务器缓存
代理服务器是浏览器和源服务器之间的中间服务器，浏览器先向这个中间服务器发起Web请求，经过处理后(比如权限验证，缓存匹配等)，再将请求转发到源服务器。
代理服务器缓存的运作原理跟浏览器的运作原理差不多，只是规模更大。
可以把它理解为一个共享缓存，不只为一个用户服务，一般为大量用户提供服务，因此在减少相应时间和带宽使用方面很有效，同一个副本会被重用多次。
常见代理服务器缓存解决方案有Squid等，这里不再详述。
.2.2、CDN缓存
CDN(Contentdeliverynetworks)缓存，也叫网关缓存、反向代理缓存。
CDN缓存一般是由网站管理员自己部署，为了让他们的网站更容易扩展并获得更好的性能。
浏览器先向CDN网关发起Web请求，网关服务器后面对应着一台或多台负载均衡源服务器，会根据它们的负载请求，动态将请求转发到合适的源服务器上。
虽然这种架构负载均衡源服务器之间的缓存没法共享，但却拥有更好的处扩展性。
从浏览器角度来看，整个CDN就是一个源服务器。
.、浏览器端缓存
浏览器缓存(BrowserCaching)是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制，有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据，整体上加速网页展示给用户。
.4、Web应用层缓存
应用层缓存指的是从代码层面上，通过代码逻辑和缓存策略，实现对数据，页面，图片等资源的缓存，
可以根据实际情况选择将数据存在文件系统或者内存中，减少数据库查询或者读写瓶颈，提高响应效率。
接下来从Web前端的角度着重了解浏览器端缓存机制。
四web缓存之浏览器端缓存浅析根据标准，到目前为止，H5一共有6种缓存机制，有些是之前已有，有些是H5才新加入的。
1.浏览器缓存机制
2.DomStorgage(WebStorage)存储机制
.WebSQLDatabase存储机制
4.ApplicationCache(AppCache)机制
5.IndexedDatabase(IndexedDB)
6.FileSystemAPI
4.1、浏览器缓存机制
4.1.1、非HTTP协议定义的缓存机制
浏览器缓存机制，其实主要就是HTTP协议定义的缓存机制(如：Expires;Cache-control等)。
但是也有非HTTP协议定义的缓存机制，如使用HTMLMeta标签，Web开发者可以在HTML页面的节点中加入标签，代码如下：
METAHTTP-EQUIV="Pragma"CONTENT="no-cache"METAHTTP-EQUIV="Expires"CONTENT="0"
上述代码的作用是告诉浏览器当前页面不被缓存，每次访问都需要去服务器拉取。
使用上很简单，但只有部分浏览器可以支持，而且所有缓存代理服务器都不支持，因为代理不解析HTML内容本身。
下面主要介绍HTTP协议定义的缓存机制。
4.1.2、HTTP协议定义的缓存机制
通过HTTP协议头里的Cache-Control(或Expires)和Last-Modified(或Etag)等字段来控制文件缓存的机制。
这应该是WEB中最早的缓存机制了，是在HTTP协议中实现的，有点不同于DomStorage、AppCache等缓存机制，但本质上是一样的。
可以理解为，一个是协议层实现的，一个是应用层实现的。
4.1.、HTTP1.0时代缓存字段详解
Pragma：设置页面是否缓存，为Pragma则缓存，no-cache则不缓存。
Expires：有了Pragma来禁用缓存，自然也需要有个东西来启用缓存和定义缓存时间，对鏃╂湡鐧界櫆椋庣棁鐘跺浘鐗?鍖椾含娌荤枟鐧界櫆椋庝竴鑸渶瑕佸灏戦挶