前段时间用 ionic 开发了一个 App，当时需要调用 WebView 来显示一些内容（本来采用的 iframe 方案，由于很多网站已经禁用了 iframe 且这种方式不太安全可靠，后来想想还是改用 WebView 了）。WebView 下有很多问题啊，一是样式和 ionic 不太匹配，而是性能上显得奇慢，突出表现为耗费大量流量而且加载慢。样式匹配的问题有现成解决方案，本篇主要针对当时遇到的性能问题给出一些建议。
H5 页面加载慢的原因
原因有两个方面：
- 自身渲染速度慢，比如解析 js 脚本，还有手机或者其他硬件设备的性能
- 如果 js 脚本过于复杂，前端又包含大量 js 脚本的话，会影响渲染速度
- 手机等硬件问题就不说了，尤其是 Android 手机
- 资源加载慢，主要是因为 H5 页面请求数量太多（包括 js、css 等一系列资源文件）
- 基本 url 请求
- css、js 甚至图片视频等资源文件
- 这些请求是串行的，不请求完不行
一些解决办法
- Android WebView 自身有一个缓存机制
- H5 页面的预加载
Android WebView 缓存
缓存的好处有两个：
- 加载过后没有网络连接时也能访问
- 提高访问速度并减少流量损耗
Android WebView 缓存机制其实也就是 H5 页面的缓存机制，主要有5种：
-
浏览器缓存
浏览器缓存主要依赖 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 自带浏览器自动实现
-
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); -
Dom Storage 缓存
Dom Storage 通过 key-value 的形式来存储字符串，分为两种：
- sessionStorage：临时性，页面关闭后无法使用
- localStorage：持久性，页面关闭后仍能使用
其存储空间对于不同浏览器不同
优点：相对于 cookie 来说，存储空间更大，不用和 cookie 一样每次都向服务器发送请求。存在本地，相对安全稳定
缺点：同上
应用场景：取代 cookie 机制。存储简单、临时的数据。
实现：还是设置 WebView 的 settings
WebSettings settings = getSettings(); settings.setDomStorageEnabled(true); -
Web SQL Database 缓存
Web SQL Database 实质上是一种基于 SQL 的数据库存储机制，适合于结构化数据的存储
优点：充分利用数据库特点，方便增删改查
缺点：同上，且官方不再维护，取而代之是 Indexed Database 缓存机制
应用场景：存储结构化数据
实现：依然是设置 WebView 的 settings
WebSettings settings = getSettings(); String cacheDir = context.getFilesDir().getAbsolutePath()+"cache/"; settings.setDatabaseEnabled(true); -
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 就把下一页的网页提前访问一遍。酱就感觉快多了。
