前段时间用 ionic 开发了一个 App，当时需要调用 WebView 来显示一些内容（本来采用的 iframe 方案，由于很多网站已经禁用了 iframe 且这种方式不太安全可靠，后来想想还是改用 WebView 了）。WebView 下有很多问题啊，一是样式和 ionic 不太匹配，而是性能上显得奇慢，突出表现为耗费大量流量而且加载慢。样式匹配的问题有现成解决方案，本篇主要针对当时遇到的性能问题给出一些建议。

H5 页面加载慢的原因

原因有两个方面：

• 自身渲染速度慢，比如解析 js 脚本，还有手机或者其他硬件设备的性能
  • 如果 js 脚本过于复杂，前端又包含大量 js 脚本的话，会影响渲染速度
  • 手机等硬件问题就不说了，尤其是 Android 手机
• 资源加载慢，主要是因为 H5 页面请求数量太多（包括 js、css 等一系列资源文件）
  • 基本 url 请求
  • css、js 甚至图片视频等资源文件
  • 这些请求是串行的，不请求完不行

一些解决办法

1. Android WebView 自身有一个缓存机制
2. H5 页面的预加载

Android WebView 缓存

缓存的好处有两个：

• 加载过后没有网络连接时也能访问
• 提高访问速度并减少流量损耗

Android WebView 缓存机制其实也就是 H5 页面的缓存机制，主要有5种：

1. 浏览器缓存

   浏览器缓存主要依赖 Http 头中 Cache-Control （Expires）和 Last-Modified（Etag） 等字段来控制

   Cache-Control：文件在本地缓存的时间

   Expires：同 Cache-Control 一样，前者优先级更高，是 http1.1 协议之后增加的字段

   Last-Modified：文件在服务器上最新更新时间，当本地缓存过期时，发送 If-Modified-Since 字段带上时间给服务器，服务器判断文件是否更新过，没有更新服务器会返回304，有更新返回200，并返回最新更新的文件

   Etag：功能同 Last-Modified

   常用做法：Cache-Control 与 Last-Modified 一起用，Expires 和 Etag 一起使用

   优点：不需要你过多考虑，只要在协议上设定好

   缺点：一是必须要首次加载之后，二是缓存被清之后还要加载，三是加载别人的网页时协议不由你设定啊

   场景：加载静态资源时，可以考虑，如 JS、CSS、图片等

   实现：不需要你考虑，WebView 自带浏览器自动实现

2. Application Cache 缓存

   Appliaction Cache 是一种以文件为缓存，且文件有一定更新机制的缓存机制，是专门用于 WebApp 缓存的机制。在 HTML 文件头部用 manifest 说明，是浏览器缓存的一种补充

   优点：同上

   缺点：同上

   场景：同上

   实现：通过设置 WebView 的 settings 来实现。

   WebSettings settings = getSettings();
   String cacheDir = context.getFilesDir().getAbsolutePath()+"cache/";
   settings.setAppCachePath(cacheDir);
   settings.setAppCahceMax(50*1024*1024);
   settings.setAppCacheEnabled(true);
   

3. Dom Storage 缓存

   Dom Storage 通过 key-value 的形式来存储字符串，分为两种：

   • sessionStorage：临时性，页面关闭后无法使用
   • localStorage：持久性，页面关闭后仍能使用

   其存储空间对于不同浏览器不同

   优点：相对于 cookie 来说，存储空间更大，不用和 cookie 一样每次都向服务器发送请求。存在本地，相对安全稳定

   缺点：同上

   应用场景：取代 cookie 机制。存储简单、临时的数据。

   实现：还是设置 WebView 的 settings

   WebSettings settings = getSettings();
   settings.setDomStorageEnabled(true);
   

4. Web SQL Database 缓存

   Web SQL Database 实质上是一种基于 SQL 的数据库存储机制，适合于结构化数据的存储

   优点：充分利用数据库特点，方便增删改查

   缺点：同上，且官方不再维护，取而代之是 Indexed Database 缓存机制

   应用场景：存储结构化数据

   实现：依然是设置 WebView 的 settings

   WebSettings settings = getSettings();
   String cacheDir = context.getFilesDir().getAbsolutePath()+"cache/";
   settings.setDatabaseEnabled(true);
   

5. Indexed Database 缓存

   Indexed Database 属于 NoSQL 数据库，也是通过 key-value 的形式来提供的

   优点：存储空间大，默认推荐是250M存储空间，可以生成索引，同样可以像操作数据库一样操作数据，采用异步的 API 调用，用户体验较好

   缺点：同上

   应用场景：存储复杂、结构化的数据

   实现：都是设置 WebView 的 settings

   WebSettings settings = getSettings();
   settings.setJavaScriptEnabled(true);
   // what?? 只要设置支持 JS 就能自动打开 IndexedDB 存储机制，神奇不神奇？
   

关于 Android WebView 自身缓存机制总结

我们可以根据不同的场景设置不同的缓存机制，也可以组合使用，通常的做法是酱的：

• 存储静态资源
  • 浏览器缓存
  • Application Cache
• 存储临时简单数据
  • Dom Storage
• 存储复杂数据量大的数据
  • IndexedDB Storage

H5 页面预加载

可是以上方案都是第一次加载依然很慢咋办？为了提升这个体验，我们产生了 资源预加载 的方案

它是怎么实现的呢？具体的 App 有具体自己的方式

一种方式是通过拦截 H5 页面的资源网络请求，从而从本地读取资源而不是从网络读取

一种实现就是，首先将频率更新低、常用且固定的静态资源文件放到本地，拦截 H5 页面资源网络请求，如果检测到有相同的静态资源，直接使用本地的，不再发送请求。

举个栗子：很多微信就是采取这样的方案来解决问题的，图片和视频等资源文件在 wifi 才加载或者最后才加载

Demo 可以参考 https://github.com/Carson-Ho/WebView_InterceptRequest

当然，在我开发 ionic App 的时候，没法修改这些 WebView 设置啊之类的这么做，但是也想用预加载啊，怎么办？没事，预加载的没有具体实现，它只是一个思路，具体情况具体分析。

比如像我这样的情况：ionic 没法修改 WebView 设置，仅仅是能调用 WebView，我打开的 url 是外部 url，不是自己的网站，静态资源和脚本是别人网站设置的不由我控制

我的解决方案（仅供参考）：在 App 启动时，当加载完数据之后，后台默默启动一个 WebView ，提前将需要访问的网站（第一页假如有20个网页）访问一遍，使其在浏览器中留有缓存，当我在浏览这一页时，WebVIew 就把下一页的网页提前访问一遍。酱就感觉快多了。