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
  • 加载一个空页面
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345

推荐阅读更多精彩内容

  • 为了更好的阅读体验,建议阅读原文插播广告 —— 几十行代码完成资讯类App多种形式内容页HybridPageKit...
    deqzhu阅读 4,436评论 0 10
  • 为了更好的阅读体验,建议阅读原文 想和我一起全面了解新闻类App的开发,点我学习 据相关数据显示,截至2017年底...
    deqzhu阅读 9,007评论 10 152
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,570评论 0 7
  • 前端开发面试题 <a name='preface'>前言</a> 只看问题点这里 看全部问题和答案点这里 本文由我...
    自you是敏感词阅读 754评论 0 3
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,456评论 1 19