Android webview的缓存机制

1.Android WebView性能问题主要原因是：

1.1 H5 页面加载速度慢

1.1.1 渲染速度慢

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

• Js 解析效率
  Js 本身的解析过程复杂、解析速度不快 & 前端页面涉及较多 JS 代码文件，所以叠加起来会导致 Js 解析效率非常低
• 手机硬件设备的性能
  由于Android机型碎片化，这导致手机硬件设备的性能不可控，而大多数的Android手机硬件设备无法达到很好很好的硬件性能

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

1.1.2 页面资源加载缓慢

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

• H5页面一般会比较多
• 每加载一个 H5页面，都会产生较多网络请求：
  1. HTML 主 URL 自身的请求；
  2. HTML外部引用的JS、CSS、字体文件，图片也是一个独立的 HTTP 请求

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

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

1.2 耗费流量

• 每次使用 H5页面时，用户都需要重新加载 Android WebView的H5 页面
• 每加载一个 H5页面，都会产生较多网络请求（上面提到）
• 每一个请求都串行的，这么多请求串起来，这导致消耗的流量也会越多

2. 解决方案

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

（这意味着 H5网页 加载过之后会存储在缓存区域，在没有网络连接时也可以进行访问）

• 使用Android WebView 自身的缓存机制
• 自身构建缓存机制（主要是H5页面资源的预加载）

Android WebView 的缓存机制 & 缓存模式 ：
a. 缓存机制：如何将加载过的网页数据保存到本地
b. 缓存模式：加载网页时如何读取之前保存到本地的网页缓存

前者是保存，后者是读取，请注意区别




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

1.浏览器 缓存机制：Android WebView内置自动实现，即不需要设置即实现 2.Application Cache 缓存机制

 具体实现

        // 通过设置WebView的settings来实现
        WebSettings settings = getSettings();

        String cacheDirPath = context.getFilesDir().getAbsolutePath()+"cache/";
        settings.setAppCachePath(cacheDirPath);
        // 1. 设置缓存路径

         settings.setAppCacheMaxSize(20*1024*1024);
        // 2. 设置缓存大小

        settings.setAppCacheEnabled(true);
        // 3. 开启Application Cache存储机制

// 特别注意
// 每个 Application 只调用一次 WebSettings.setAppCachePath() 和
 WebSettings.setAppCacheMaxSize()复制代码

作者：Carson_Ho
链接：http://www.jianshu.com/p/5e7075f4875f
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

3.Dom Storage 缓存机制

a. 原理

DOM Storage 分为 sessionStorage & localStorage； 二者使用方法基本相同，区别在于作用范围不同：
b. sessionStorage：具备临时性，即存储与页面相关的数据，它在页面关闭后无法使用
c. localStorage：具备持久性，即保存的数据在页面关闭后也可以使用。

d. 具体实现

        // 通过设置 `WebView`的`Settings`类实现
        WebSettings settings = getSettings();

        settings.setDomStorageEnabled(true);
        // 开启DOM storage复制代码

4.Web SQL Database 缓存机制

具体实现

        // 通过设置WebView的settings实现
        WebSettings settings = getSettings();

        String cacheDirPath = context.getFilesDir().getAbsolutePath()+"cache/";
        settings.setDatabasePath(cacheDirPath);
        // 设置缓存路径

        settings.setDatabaseEnabled(true);
        // 开启 数据库存储机制复制代码

特别说明

• 根据官方说明，Web SQL Database存储机制不再推荐使用（不再维护）
• 取而代之的是 IndexedDB缓存机制，下面会详细介绍
• 
  

5.Indexed Database 缓存机制   (类似于 Dom Storage 存储机制 的key-value存储方式)

a. 应用场景

存储 复杂、数据量大的结构化数据

b. 具体实现：

// 通过设置WebView的settings实现
        WebSettings settings = getSettings();

        settings.setJavaScriptEnabled(true);
        // 只需设置支持JS就自动打开IndexedDB存储机制
        // Android 在4.4开始加入对 IndexedDB 的支持，只需打开允许 JS 执行的开关就好了。复制代码

6.File System 缓存机制（H5页面新加入的缓存机制，虽然Android WebView暂时不支持）

小技巧

• 在使用了上述说的Android WebView的缓存机制后，短时间内再次访问同一个H5页面时，加载速度会比第一次的时间短、更加流畅
• 基于 Android WebView自身的这些缓存机制，有一种小技巧能更好地去减少H5页面的加载速度 & 提高性能：在应用启动时就初始化一个 WebView ，事先加载常用H5页面资源（加载后就有缓存了），后续需要打开这些H5页面时就直接从本地获取。

  这种技巧其实是采用了 资源预加载 的思想：提早加载将来需要使用的H5页面（有缓存了），使用时直接取过来用，而不用在需要时才去加载

• 具体实现：在Android 的BaseApplication就初始化一个WebView对象用于加载常用的H5页面资源；当需要使用这些页面时再从BaseApplication里取过来直接使用

  1. 对于Android WebView的首页建议使用这种方案，能有效提高首页加载的效率
  2. 当然这里的BaseApplication只是举个例子，你也可以选择在其他地方提前加

2.1.2 缓存模式

• 定义
  缓存模式是一种 当加载 H5网页时 该如何读取之前保存到本地缓存
  从而进行使用 的方式

  即告诉Android WebView 什么时候去读缓存，以哪种方式去读缓存

• Android WebView 自带的缓存模式有4种：

// 缓存模式说明: 
      // LOAD_CACHE_ONLY: 不使用网络，只读取本地缓存数据
      // LOAD_NO_CACHE: 不使用缓存，只从网络获取数据.
      // LOAD_DEFAULT: （默认）根据cache-control决定是否从网络上取数据。
      // LOAD_CACHE_ELSE_NETWORK，只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据。复制代码

• 具体使用

WebView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
// 设置参数即可复制代码

本文章是翻译作者：Carson_Ho的博文而来，
详细内容可参考：http://www.jianshu.com/p/5e7075f4875f