iOS WKWebView优化方案（一）
2017-12-01 本文已影响3240人
Andy_Swift
关键词
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优化方案（二）
