AKWebView

背景

• 代码混乱无序，新老js交互杂乱，不利于后续维护
• 打开webView时每次都是创建新的webView, 初始化webView时耗费比较多的时间，影响用户体验
• 页面返回时，webView也随着销毁，导致我们回调给web的返回事件处理不稳定，存在任务还没处理完web就销毁了

优化方案

• AKWebView（基础层）

WKWebView结构.png

AKWebView是基于WKWebView的封装，实现了JS+Native的调用，cookies的同步管理，常见的网页和客户端处理。

AKWebView架构图.png

1. 基础配置层：

• WKWebViewConfiguration相关配置

• 日志打印配置

• 配置项根据实际需求扩展

2. 加载管理：

• 加载网页（重新加载，忽略缓存重新加载）

• 加载本地html文件

3. cookies管理：

• 提供cookies的同步，cookies插入，删除等方法（采用js方式注入cookies）。

• cookies本地化缓存管理（目前我们项目没有做本地化缓存）。

4. JS交互：

• 原生调用JS：OC通过脚本注入的方式调用JS（evaluateJavaScript）。

• JS调用原生：S通过WKScriptMessageHandler协议调用Native，WKScriptMessageHandler的使用非常的简单易用

5. 其他：

• 请求拦截，以便实现离线包功能

• 兼容post请求

• AKWebViewController

AKWebViewController.png

1. UI层：

• 导航栏配置：标题，显隐，自定义返回按钮，自定义右侧按钮
• 加载进度条：根据web加载进度显示进度条

2. cookies管理：

• domain-config获取cookies配置，注入cookies时使用
• cookie生成，注入

3. js交互：

• 原生调用js。
• js调用原生：新交互（字典形式），老交互（数组形式）。

优化思路

webView加载过程：

初始化 WebView -> 请求页面 -> 下载数据 -> 解析HTML -> 请求 js/css 资源 -> dom 渲染 -> 解析 JS 执行 -> JS 请求数据 -> 解析渲染 -> 下载渲染图片

加载过程.jpg

在dom渲染前，Web页面都是白屏，所以优化的思路就是优化dom渲染前的时间耗时。从上图可以看出优化主要集中优化以下两个阶段

• WebView的初始化阶段，这个阶段可以采用类似UITableViewCell的复用池机制来解决。

• 初始化后到渲染前的阶段的优化，请求页面、下载数据、请求js/css资源这些阶段可以通过提前下载H5资源到本地，加载H5的时候加载本地资源来优化（通过注册SchemeHandler实现）。

• AKWebViewReusePool(webView复用池)

优化WebView初始化耗时的方式是在app启动之后启动一个WebView的复用池，创建一些备用的WebView

类结构：

复用池类图.png

复用结束：

• 清空各种delegate
• 清空sessionStorage
• 清除backForwardList
• 加载一个空页面