android h5使用缓存_手把手教你构建 Android WebView 的缓存机制 & 资源预加载方案

下面会详细介绍：

1.1.1 渲染速度慢

前端H5页面渲染的速度取决于 两个方面：

Js 解析效率 Js 本身的解析过程复杂、解析速度不快 & 前端页面涉及较多 JS 代码文件，所以叠加起来会导致 Js 解析效率非常低

手机硬件设备的性能 由于Android机型碎片化，这导致手机硬件设备的性能不可控，而大多数的Android手机硬件设备无法达到很好很好的硬件性能

总结：上述两个原因 导致 H5页面的渲染速度慢。

1.1.2 页面资源加载缓慢

H5 页面从服务器获得，并存储在 Android手机内存里：

H5页面一般会比较多

每加载一个 H5页面，都会产生较多网络请求：

HTML 主 URL 自身的请求；

HTML外部引用的JS、CSS、字体文件，图片也是一个独立的 HTTP 请求

HTML 主 URL 自身的请求；

HTML外部引用的JS、CSS、字体文件，图片也是一个独立的 HTTP 请求

每一个请求都串行的，这么多请求串起来，这导致 H5页面资源加载缓慢

总结：H5页面加载速度慢的原因：渲染速度慢 & 页面资源加载缓慢 导致。

1.2 耗费流量

每次使用 H5页面时，用户都需要重新加载 Android WebView的H5 页面

每加载一个 H5页面，都会产生较多网络请求(上面提到)

每一个请求都串行的，这么多请求串起来，这导致消耗的流量也会越多

综上所述，产生Android WebView性能问题主要原因是：

上述问题导致了Android WebView的H5 页面体验 与 原生Native 存在较大差距。

针对上述Android WebView的性能问题，我提出了3种解决方案：

前端H5的缓存机制(WebView 自带)

资源预加载

资源拦截

下面我将详细介绍。

2.1 前端H5的缓存机制

定义 缓存，即离线存储

这意味着 H5网页 加载后会存储在缓存区域，在无网络连接时也可访问

WebView的本质 = 在 Android中嵌入 H5页面，所以，Android WebView自带的缓存机制其实就是 H5页面的缓存机制

Android WebView除了新的File System缓存机制还不支持，其他都支持。

这意味着 H5网页 加载后会存储在缓存区域，在无网络连接时也可访问

WebView的本质 = 在 Android中嵌入 H5页面，所以，Android WebView自带的缓存机制其实就是 H5页面的缓存机制

Android WebView除了新的File System缓存机制还不支持，其他都支持。

作用

离线浏览：用户可在没有网络连接时进行H5页面访问

提高页面加载速度 & 减少流量消耗：直接使用已缓存的资源，不需要重新加载

离线浏览：用户可在没有网络连接时进行H5页面访问

提高页面加载速度 & 减少流量消耗：直接使用已缓存的资源，不需要重新加载

具体应用 此处讲解主要讲解 前端H5的缓存机制 的缓存机制 & 缓存模式 ： a. 缓存机制：如何将加载过的网页数据保存到本地 b. 缓存模式：加载网页时如何读取之前保存到本地的网页缓存 前者是保存，后者是读取，请注意区别

Android WebView自带的缓存机制有5种：

浏览器 缓存机制

Application Cache 缓存机制

Dom Storage 缓存机制

Web SQL Database 缓存机制

Indexed Database 缓存机制

File System 缓存机制(H5页面新加入的缓存机制，虽然Android WebView暂时不支持，但会进行简单介绍)

浏览器 缓存机制

Application Cache 缓存机制

Dom Storage 缓存机制

Web SQL Database 缓存机制

Indexed Database 缓存机制

File System 缓存机制(H5页面新加入的缓存机制，虽然Android WebView暂时不支持，但会进行简单介绍)

下面将详细介绍每种缓存机制。

1. 浏览器缓存机制a. 原理

根据 HTTP 协议头里的 Cache-Control(或 Expires)和 Last-Modified(或 Etag)等字段来控制文件缓存的机制

下面详细介绍Cache-Control、Expires、Last-Modified & Etag四个字段

不同的是，Etag 的取值是一个对文件进行标识的特征字串。

在向服务器查询文件是否有更新时，浏览器通过If-None-Match 字段把特征字串发送给服务器，由服务器和文件最新特征字串进行匹配，来判断文件是否有更新：没有更新回包304，有更新回包200

Etag 和 Last-Modified 可根据需求使用一个或两个同时使用。两个同时使用时，只要满足基中一个条件，就认为文件没有更新。

Expires是 HTTP1.0 标准中的字段，Cache-Control 是 HTTP1.1 标准中新加的字段

当这两个字段同时出现时，Cache-Control 优先级较高

Cache-Control&#