关键词
WKWebView优化
、混合式开发
、WKWebView+TableView
、WKWebView与js交互
主要内容
1、本文内容致力于解决WKWebView在实际使用中的各种问题,包括性能优化、提高响应速度、静态资源预加载等问题。
2、本文内容也可以为WKWebView+TableView的混合式开发提供思路与解决方案。
3、因本人技术水平所限,文中不可避免会出现错误,欢迎大家探讨指点。
WKWebview性能优化节点与对应方案
1、WkWebView时间消耗可能的节点
- 页面中初始化WKWebView时间消耗;
- WkWebView加载js、css、image等静态资源时间消耗;
- WKWebView渲染页面时间消耗;
2、对应主要的时间消耗,我的解决方案如下
- WKWebView做成单例,常驻内存,避免实例化带来的时间消耗,同时避免大量创建造成的内存消耗;
- js、css、image等进行离线缓存或提前预加载,避免展示等时候才加载,减少加载静态资源的时间消耗;
- image可以考虑使用native预加载,WKWebView中的图片由native加载好的进行替换;
- 关于页面渲染时间消耗没什么好说的,只能将页面尽可能做的简单清晰,在代码优化上多做功夫。重度交互放在native上,WKWebView只做丰富内容的展示;
概要设计
主要设计思想
- 服务端返回一个头部包含js、css内容的、可以作为所有页面壳资源的壳文件(shell.html),native使用shell以单例的方式实例化一个WKWebView;
- 当用户在浏览列表页时,接口返回每个页面所包含的image集合、页面body内容(数据接口在稍后给出),App可以选择是否对图片进行预加载以提高WKWebView的响应速度(例如wifi情况下);
- 进入包含WkWebView的页面以后,使用列表页中取得的图片和body内容对shell.html中的body内容进行替换,刷新WkWebView内容。也可以根据ID读取本地缓存文件实现内容替换,可操作性较强。
核心模块及所需方法
1、资源管理模块
- 能够根据接口返回的信息有条件地下载js、css、shell.html等静态资源,存储到指定的位置。
- 能够对静态资源文件进行管理,包括:删除缓存,更新资源等操作。
- 能够对已经浏览过的页面数据及相关字段信息进行缓存,能够对这部分资源进行管理,包括:清除老旧信息、对应ID查找指定的页面信息、更新其中的字段信息等。
2、WKWebView单例类
- 以单例模式生成shell.html文件页面;
- 能够根据model刷新页面信息;
- 支持常用的与js的交互能力;
- 代理方法能够支持获取必要的页面信息;
各部分详细代码请参照: iOS WKWebView优化方案(二)