背景
- 代码混乱无序,新老js交互杂乱,不利于后续维护
- 打开webView时每次都是创建新的webView, 初始化webView时耗费比较多的时间,影响用户体验
- 页面返回时,webView也随着销毁,导致我们回调给web的返回事件处理不稳定,存在任务还没处理完web就销毁了
优化方案
-
AKWebView(基础层)
AKWebView是基于WKWebView的封装,实现了JS+Native的调用,cookies的同步管理,常见的网页和客户端处理。
- 基础配置层:
WKWebViewConfiguration相关配置
日志打印配置
配置项根据实际需求扩展
- 加载管理:
加载网页(重新加载,忽略缓存重新加载)
加载本地html文件
- cookies管理:
提供cookies的同步,cookies插入,删除等方法(采用js方式注入cookies)。
cookies本地化缓存管理(目前我们项目没有做本地化缓存)。
- JS交互:
原生调用JS:OC通过脚本注入的方式调用JS(evaluateJavaScript)。
JS调用原生:S通过WKScriptMessageHandler协议调用Native,WKScriptMessageHandler的使用非常的简单易用
- 其他:
请求拦截,以便实现离线包功能
兼容post请求
-
AKWebViewController
- UI层:
- 导航栏配置:标题,显隐,自定义返回按钮,自定义右侧按钮
- 加载进度条:根据web加载进度显示进度条
- cookies管理:
- domain-config获取cookies配置,注入cookies时使用
- cookie生成,注入
- js交互:
- 原生调用js。
- js调用原生:新交互(字典形式),老交互(数组形式)。
优化思路
webView加载过程:
初始化 WebView -> 请求页面 -> 下载数据 -> 解析HTML -> 请求 js/css 资源 -> dom 渲染 -> 解析 JS 执行 -> JS 请求数据 -> 解析渲染 -> 下载渲染图片
在dom渲染前,Web页面都是白屏,所以优化的思路就是优化dom渲染前的时间耗时。从上图可以看出优化主要集中优化以下两个阶段
WebView的初始化阶段,这个阶段可以采用类似UITableViewCell的复用池机制来解决。
初始化后到渲染前的阶段的优化,请求页面、下载数据、请求js/css资源这些阶段可以通过提前下载H5资源到本地,加载H5的时候加载本地资源来优化(通过注册SchemeHandler实现)。
-
AKWebViewReusePool(webView复用池)
优化WebView初始化耗时的方式是在app启动之后启动一个WebView的复用池,创建一些备用的WebView
类结构:
复用结束:
- 清空各种delegate
- 清空sessionStorage
- 清除backForwardList
- 加载一个空页面