webview优化示例
维护人:戴荔春 (6016)
说明
一些Android机型上,webview创建和显示时会有比较严重的性能问题,本文针对这种问题进行优化探讨
目录
前言
本文适用范围
本文探讨的Webview优化主要是针对Android系统的,因为有些低版本的Android系统对webview的支持不是很好(比如4.0-4.3),一般来说iOS系统无法优化(iOS有时候不优化效果要比优化好)
参考来源
前人栽树,后台乘凉,本文参考了以下来源
为何优化
为何要进行webview性能优化
需要优化的首要原因是: Android中webview性能低下,特别是一些低版本中(比如4.0-4.3系统),对webview的支持不足。导致每次创建页面时会等待大量时间或存在白屏现象。
另外,优化后还有一个好处就是减少重复的创建与销毁,以前打开页面的方法都是 创建页面->打开。 然后关闭页面->销毁。每次都得这样,较为浪费性能,优化有可以更好的复用
优化适用场景
由于优化是通过复用模板页面(header,sub)来实现的,所以一般如下
-
适用于Android手机
Android中webview性能不足,每次创建新页面时耗费时间较大
-
不适用于iOS手机
iOS中性能较好,没有必要用到优化,另外实际上,由于优化是通过双页面实现,而且里面还有io操作。经实际测试,在iOS中,优化后反而速度变慢,所以iOS不进行优化
如何优化
优化原理
Android webview优化主要是基于预加载的模版页面通过loadUrl加载需要打开的页面来实现,原理如下
通过webview优化打开页面总流程
获取页面模板流程
通过模板加载页面流程
优化代码实现
目前优化方案已经集成到框架中,便于使用,这里介绍基于框架的使用,如果想要自定义实现的,可以根据原理图和参考showcase源码实现
基于框架的前期准备
由于优化代码是封装进入框架中的,所以需要集成框架,另外请注意如下要点
-
确保RayApp.Template目录结构存在
这个文件是模板页面文件,必须存在,否则调用优化API会出错。具体实现可以看showcase源码
另外,实际项目也可以修改RayApp.Template.html,让其更符合项目风格
-
确保框架是最新版本
只有最新版本的框架中才有这个api(比如WindowTools和CommonTools都有更新)
基于框架的代码使用
已经封装的尽量简单了,只需要遵循如下步骤
-
Step1:页面预加载模板
//预加载模板,一般初始化时执行 CommonTools.initReady(function(){ WindowTools.preloadTemplate(); });只有需要用到webview打开优化的页面才用预加载,如果没有预加载,那么第一次使用API时,会创建一个模板,等模板创建完毕后,再次打开才能正常使用。所以推荐页面一开始预加载模板
如页面A需要通过openWinWithTemplate打开页面B,那么页面A初始化时预加载即可,更多可以参考showcase源码(index.js)
-
Step2:使用对应的api打开页面
//以webview模板优化方式打开页面,前提是要基于框架,并且有模板页面 WindowTools.openWinWithTemplate(id,url,extras, styles, openCallback, closeCallBack);
这个api与createWin相差无几,只不过是多了一些功能以及内部实现不一样,可以参考 openWinWithTemplate
-
Step3:第一次打开某个页面时,通过initReady回调
使用模板页面打开有一个特点就是复用,所以第一次打开时,由于以前页面不存在,所以会loadUrl加载一个新的页面,加载完毕后,通过CommonTools.initReady()可以进入正常初始化
-
Step3:第二次打开同一个页面时,触发loadUrlReady事件
如果第一次打开模版页面后,退出页面,重新打开同一个页面,这时候由于模板缓存的页面是同一个,所以直接显示该页面,不会再触发initReady,但是会触发一个loadUrlReady事件,通过CommonTools.loadUrlReady(extras)拿到回调事件
注意,其中 extras是页面传过来的参数,因为可能第二次打开时需要显示不同的内容,所以参数可能会变化
示例demo
webview优化的示例
优化前后对比
有对比才有效果,这里分别用Android 5.0华为荣耀7以及其它设备做了优化前后的对比效果分析
gif可能由于帧率问题,效果会没有真机上明显。另外可以像showcase里的测试页面一样,自定义标题,这样优化效果更好
优化前
-
华为荣耀7(5.0系统)
-
Vivo Y17W(4.2.2系统)
优化后
-
华为荣耀7(5.0系统)
-
Vivo Y17W(4.2.2系统)
优化后的示例demo
目前框架showcase中就用到了最新的优化效果,参考 showcase示例