AKWebView

背景

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

优化方案

  • AKWebView(基础层)
WKWebView结构.png

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

AKWebView架构图.png
  1. 基础配置层:
  • WKWebViewConfiguration相关配置

  • 日志打印配置

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

  1. 加载管理:
  • 加载网页(重新加载,忽略缓存重新加载)

  • 加载本地html文件

  1. cookies管理:
  • 提供cookies的同步,cookies插入,删除等方法(采用js方式注入cookies)。

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

  1. JS交互:
  • 原生调用JS:OC通过脚本注入的方式调用JS(evaluateJavaScript)。

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

  1. 其他:
  • 请求拦截,以便实现离线包功能

  • 兼容post请求

  • AKWebViewController
AKWebViewController.png
  1. UI层:
  • 导航栏配置:标题,显隐,自定义返回按钮,自定义右侧按钮
  • 加载进度条:根据web加载进度显示进度条
  1. cookies管理:
  • domain-config获取cookies配置,注入cookies时使用
  • cookie生成,注入
  1. 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
  • 加载一个空页面

你可能感兴趣的:(AKWebView)