iOS WKWebView优化方案（一）

关键词
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只做丰富内容的展示；

概要设计

---

主要设计思想

1. 服务端返回一个头部包含js、css内容的、可以作为所有页面壳资源的壳文件（shell.html），native使用shell以单例的方式实例化一个WKWebView；
2. 当用户在浏览列表页时，接口返回每个页面所包含的image集合、页面body内容（数据接口在稍后给出），App可以选择是否对图片进行预加载以提高WKWebView的响应速度（例如wifi情况下）；
3. 进入包含WkWebView的页面以后，使用列表页中取得的图片和body内容对shell.html中的body内容进行替换，刷新WkWebView内容。也可以根据ID读取本地缓存文件实现内容替换，可操作性较强。

核心模块及所需方法

1、资源管理模块

• 能够根据接口返回的信息有条件地下载js、css、shell.html等静态资源，存储到指定的位置。
• 能够对静态资源文件进行管理，包括：删除缓存，更新资源等操作。
• 能够对已经浏览过的页面数据及相关字段信息进行缓存，能够对这部分资源进行管理，包括：清除老旧信息、对应ID查找指定的页面信息、更新其中的字段信息等。

2、WKWebView单例类

• 以单例模式生成shell.html文件页面；
• 能够根据model刷新页面信息；
• 支持常用的与js的交互能力；
• 代理方法能够支持获取必要的页面信息；

各部分详细代码请参照: iOS WKWebView优化方案（二）