目录
1H5缓存机制介绍
2H5缓存机制原理分析
2.1浏览器缓存机制
2.2DomStorgage（WebStorage）存储机制
2.3WebSQLDatabase存储机制
2.4ApplicationCache（AppCache）机制
2.5IndexedDatabase（IndexedDB）
2.6FileSystemAPI
3移动端Web加载性能（缓存）优化
1H5缓存机制介绍
H5，即HTML5，是新一代的HTML标准，加入很多新的特性。离线存储（也可称为缓存机制）是其中一个非常重要的特性。H5引入的离线存储，这意味着web应用可进行缓存，并可在没有因特网连接时进行访问。
H5应用程序缓存为应用带来三个优势：
离线浏览-用户可在应用离线时使用它们
速度-已缓存资源加载得更快
减少服务器负载-浏览器将只从服务器下载更新过或更改过的资源。
根据标准，到目前为止，H5一共有6种缓存机制，有些是之前已有，有些是H5才新加入的。
浏览器缓存机制
DomStorgage（WebStorage）存储机制
WebSQLDatabase存储机制
ApplicationCache（AppCache）机制
IndexedDatabase（IndexedDB）
FileSystemAPI
下面我们首先分析各种缓存机制的原理、用法及特点；然后针对Anroid移动端Web性能加载优化的需求，看如果利用适当缓存机制来提高Web的加载性能。
2H5缓存机制原理分析
2.1浏览器缓存机制
浏览器缓存机制是指通过HTTP协议头里的Cache-Control（或Expires）和Last-Modified（或Etag）等字段来控制文件缓存的机制。这应该是WEB中最早的缓存机制了，是在HTTP协议中实现的，有点不同于DomStorage、AppCache等缓存机制，但本质上是一样的。可以理解为，一个是协议层实现的，一个是应用层实现的。
Cache-Control用于控制文件在本地缓存有效时长。最常见的，比如服务器回包：Cache-Control:max-age=表示文件在本地应该缓存，且有效时长是秒（从发出请求算起）。在接下来秒内，如果有请求这个资源，浏览器不会发出HTTP请求，而是直接使用本地缓存的文件。
Last-Modified是标识文件在服务器上的最新更新时间。下次请求时，如果文件缓存过期，浏览器通过If-Modified-Since字段带上这个时间，发送给服务器，由服务器比较时间戳来判断文件是否有修改。如果没有修改，服务器返回告诉浏览器继续使用缓存；如果有修改，则返回，同时返回最新的文件。
Cache-Control通常与Last-Modified一起使用。一个用于控制缓存有效时间，一个在缓存失效后，向服务查询是否有更新。
Cache-Control还有一个同功能的字段：Expires。Expires的值一个绝对的时间点，如：Expires:Thu,10Nov:45:11GMT，表示在这个时间点之前，缓存都是有效的。
Expires是HTTP1.0标准中的字段，Cache-Control是HTTP1.1标准中新加的字段，功能一样，都是控制缓存的有效时间。当这两个字段同时出现时，Cache-Control是高优化级的。
Etag也是和Last-Modified一样，对文件进行标识的字段。不同的是，Etag的取值是一个对文件进行标识的特征字串。在向服务器查询文件是否有更新时，浏览器通过If-None-Match字段把特征字串发送给服务器，由服务器和文件最新特征字串进行匹配，来判断文件是否有更新。没有更新回包，有更新回包。Etag和Last-Modified可根据需求使用一个或两个同时使用。两个同时使用时，只要满足基中一个条件，就认为文件没有更新。
另外有两种特殊的情况：
手动刷新页面（F5)，浏览器会直接认为缓存已经过期（可能缓存还没有过期），在请求中加上字段：Cache-Control:max-age=0，发包向服务器查询是否有文件是否有更新。
强制刷新页面（Ctrl+F5)，浏览器会直接忽略本地的缓存（有缓存也会认为本地没有缓存），在请求中加上字段：Cache-Control:no-cache（或Pragma:no-cache），发包向服务重新拉取文件。
下面是通过GoogleChrome浏览器（用其他浏览器+抓包工具也可以）自带的开发者工具，对一个资源文件不同情况请求与回包的截图。
首次请求：
缓存有效期内请求：(fromcache)
缓存过期后请求：（NotModified)
一般浏览器会将缓存记录及缓存文件存在本地Cache文件夹中。Android下App如果使用Webview，缓存的文件记录及文件内容会存在当前app的data目录中。
分析：Cache-Control和Last-Modified一般用在Web的静态资源文件上，如JS、CSS和一些图像文件。通过设置资源文件缓存属性，对提高资源文件加载速度，节省流量很有意义，特别是移动网络环境。但问题是：缓存有效时长该如何设置？如果设置太短，就起不到缓存的使用；如果设置的太长，在资源文件有更新时，浏览器如果有缓存，则不能及时取到最新的文件。
Last-Modified需要向服务器发起查询请求，才能知道资源文件有没有更新。虽然服务器可能返回告诉没有更新，但也还有一个请求的过程。对于移动网络，这个请求可能是比较耗时的。有一种说法叫“消灭”，指的就是优化掉的请求。
抓包发现，带if-Modified-Since字段的请求，如果服务器回包，回包带有Cache-Control:max-age或Expires字段，文件的缓存有效时间会更新，就是文件的缓存会重新有效。回包后如果再请求，则又直接使用缓存文件了，不再向服务器查询文件是否更新了，除非新的缓存时间再次过期。
另外，Cache-Control与Last-Modified是浏览器内核的机制，一般都是标准的实现，不能更改或设置。以QQ浏览器的X5为例，Cache-Control与Last-Modified缓存不能禁用。缓存容量是12MB，不分HOST，过期的缓存会最先被清除。如果都没过期，应该优先清最早的缓存或最快到期的或文件大小最大的；过期缓存也有可能还是有效的，清除缓存会导致资源文件的重新拉取。
还有，浏览器，如X5，在使用缓存文件时，是没有对缓存文件内容进行校验的，这样缓存文件内容被修改的可能。
分析发现，浏览器的缓存机制还不是非常完美的缓存机制。完美的缓存机制应该是这样的：
缓存文件没更新，尽可能使用缓存，不用和服务器交互；
缓存文件有更新时，第一时间能使用到新的文件；
缓存的文件要保持完整性，不使用被修改过的缓存文件；
缓存的容量大小要能设置或控制，缓存文件不能因为存储空间限制或过期被清除。
以X5为例，第1、2条不能同时满足，第3、4条都不能满足。
在实际应用中，为了解决Cache-Control缓存时长不好设置的问题，以及为了”消灭“，Web前端采用的方式是：
在要缓存的资源文件名中加上版本号或文件MD5值字串，如北京白癜风治疗一般需要多少钱白癜风如何治