背景
- 代码混乱无序，新老js交互杂乱，不利于后续维护
- 打开webView时每次都是创建新的webView, 初始化webView时耗费比较多的时间，影响用户体验
- 页面返回时，webView也随着销毁，导致我们回调给web的返回事件处理不稳定，存在任务还没处理完web就销毁了
优化方案
-
AKWebView（基础层）
WKWebView结构.png
AKWebView是基于WKWebView的封装，实现了JS+Native的调用，cookies的同步管理，常见的网页和客户端处理。
AKWebView架构图.png
- 基础配置层：
-
WKWebViewConfiguration相关配置
-
日志打印配置
-
配置项根据实际需求扩展
- 加载管理：
-
加载网页（重新加载，忽略缓存重新加载）
-
加载本地html文件
- cookies管理：
-
提供cookies的同步，cookies插入，删除等方法（采用js方式注入cookies）。
-
cookies本地化缓存管理（目前我们项目没有做本地化缓存）。
- JS交互：
-
原生调用JS：OC通过脚本注入的方式调用JS（evaluateJavaScript）。
-
JS调用原生：S通过WKScriptMessageHandler协议调用Native，WKScriptMessageHandler的使用非常的简单易用
- 其他：
-
请求拦截，以便实现离线包功能
-
兼容post请求
-
AKWebViewController
AKWebViewController.png
- UI层：
- 导航栏配置：标题，显隐，自定义返回按钮，自定义右侧按钮
- 加载进度条：根据web加载进度显示进度条
- cookies管理：
- domain-config获取cookies配置，注入cookies时使用
- cookie生成，注入
- 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
- 加载一个空页面
网友评论