2018-03-11

WebView缓存

  Android WebView缓存可以分为页面缓存和数据缓存  页面缓存是指加载一个网页时html、JS、CSS等页面或者资源数据。  数据缓存分别为两种：AppCache和DOM Storage(Web Storage)。  AppCache也是我们的H5缓存，我们可以设置缓存的目录  Dom Storage具有Session Storage和Local Storage两种，前者是会话级别的存储，页面关闭之后就消失了，后者是本地化存储

1. Android WebView 存在什么性能问题？

                    Android WebView 里 H5 页面加载速度慢

                     耗费流量

H5 页面加载速度慢的原因

下面会详细介绍：

1.1.1 渲染速度慢

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

Js解析效率

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

手机硬件设备的性能

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

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

1.1.2 页面资源加载缓慢

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

H5页面一般会比较多

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

HTML主URL自身的请求；

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

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

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

1.2 耗费流量

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

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

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

通常缓存目录/data/data/package_name/

// 缓存模式说明:

 // LOAD_CACHE_ONLY: 不使用网络，只读取本地缓存数据 

 // LOAD_NO_CACHE: 不使用缓存，只从网络获取数据. 

 // LOAD_DEFAULT: （默认）根据cache-control决定是否从网络上取数据。

 // LOAD_CACHE_ELSE_NETWORK，只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据。

 解决方案

1.自身的缓存机制

      定义缓存，即离线存储

            作用

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

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

具体应用 

此处讲解主要讲解 Android WebView 的缓存机制 & 缓存模式 ： 

a. 缓存机制：如何将加载过的网页数据保存到本地 

b. 缓存模式：加载网页时如何读取之前保存到本地的网页缓存