DCloud_heavensoft
DCloud_heavensoft
  • 发布:2016-03-12 07:10
  • 更新:2018-11-05 00:04
  • 阅读:51834

提升HTML5的性能体验系列之五 webview启动速度优化及事件顺序解析

分类:HTML5+

系列文章目录导航:

【本文更新时间2017-4-26】

webview加载的5个事件

webview加载时有5个事件。触发顺序为loading、titleUpdate、rendering、rendered、loaded。
webview开始载入页面时触发loading,
载入过程中如果<title>节点已经解析并赋予新值,触发titleUpdate,
页面开始渲染,触发rendering,
页面渲染完毕,触发rendered,
页面载入完毕触发loaded。

loaded常用于判断页面是否载入完毕,载入完毕才显示新页面。
但有时页面内容很长时,全部载入完毕比较慢,导致显示新窗体比较慢。为了让新窗体打开快点,我们可以在titleUpdate时就显示新窗体。
因为网页本身有分步渲染的机制,所以一般只要滚动前的第一屏页面渲染完毕就不会让用户看到白屏。
在2014年,手机普遍的渲染能力较慢,所以为避免白屏,官方的框架和示例默认都是loaded时show页面。但到了2017年,本地的普通HTML即使不预载,titleupdate时也已经不会白屏了。从HBuilder8.8起,DCloud推出了titlenview的原生title,切屏时title永不会白屏。
如果是从服务器在线载入页面,或者本地的页面非常复杂导致渲染很慢,此时titleUpdate时仍然可能白屏,此时需使用rendering或rendered事件可避免白屏。

为什么rendered和loaded是2个事件呢?
其实在纯本地页面时这2个事件几乎没区别。但有时页面里会引入一些优先级较低的外部远程网络js,比如统计js,一旦网络响应慢,或者干脆是无效引用,虽然页面渲染完了,但loaded会触发的很慢,直到这些网络js也加载好或超时才触发。

有人问plus ready和webview的loaded、以及HTML里的DOMContentLoaded 这3个事件的顺序。
plus ready在HBuilder早期是webview的loaded事件发生时才触发。
但随着技术的进步,目前策略已经变化。
在iOS上,plus ready已经名存实亡,只是为了向下兼容,因为在webview最开始,plus就是生效的。目前iOS上plus ready事件的触发为保持向下兼容也是在webview的loaded时,但该事件触发之前其实plus已经可以使用了。
在安卓上,plus ready默认也是在webview的loaded时,但可通过如下方法,5+ API提前生效可用:http://ask.dcloud.net.cn/article/921。如果开发者使用了该文的方法配置了提前生效,虽然plus ready的执行时间没变,但在titleUpdate后就可以使用plus的api了。
注意:plus提前生效后,在plus ready里操作dom就变的危险了,因为plus ready快于DOMContentLoaded,造成dom还没有准备好。此时操作dom,还是得在DOMContentLoaded之后。同时plus提前生效会让页面本身的js执行时间推后几十至几百毫秒,这点使用时要注意。

注意:以上的事件在实际代码监听时,需要写在不同的webview里。
由于新开的webview里的plus ready时间晚于该webview的loading、titleUpdate,所以在新webview里用plus api监听这2个事件是监听不到初次打开的。
只能在老的webview里对新webview的loading和titleUpdate进行监听。

注意:如果页面是网络页面,并且发生服务器跳转,有可能触发多次titleupdate。

注意:在个别国产手机上,如果网页的title节点内容为空,不会触发titleupdate事件。

提供一个判断webview载入时间的方法。

一般webview载入要多久,开发者可以自己使用计时器计时,计算从开始载入到loaded的时间差。
但首页的载入速度开发者无法编程获得,5+runtime提供了首页的webview的载入时间,plus.runtime.launchLoadedTime。
这个time最大的用途是判断手机性能。
首页正常是本地页面,同样的首页在不同手机上loadedtime值是不同的,根据这个值,就知道了这台手机载入网页的速度到底多快。
这个速度与本地io性能有关,也与计算渲染能力有关。
有了这个值,我们可以根据设备做性能优化。

App的启动加速技巧

首页的配置几乎都是在manifest做,用好manifest才能优化好app的启动速度。
1.首页的顶部title,在manifest里配置laucherwebview的navigationbar,描述title的背景色、文字等样式,因为是原生绘制,要比webview快不少。
2.如果底部有tab,建议在manifest里配原生tab,参考http://ask.dcloud.net.cn/article/12602。如果是顶部可左右拖动的WebviewGroup,则原生tab目前还不能满足这类需求,此时需要用双首页。双首页是一个很有趣的机制,在manifest里配置,DCloud的引擎会同时打开2个webview,而不是先等一个webview的plus生效后通过js再创建另一个webview。
3.然后manifest里配置splash关闭时间为titleUpdate,可以非常早的关闭splash。
在的HBuilder8.8中,支持subnview,这个技术可以在屏幕上引入更多原生渲染的内容,让页面渲染更快。

在提供些其他影响app启动的设置:
如果设置了runmode为解压模式,安装apk后第一次启动时需要先把js等资源解压到sdcard,这里有个耗时。第二次启动就好了。

15 关注 分享
罗成007 damdmen Lanman_Group 你猜我猜不猜 最爱橙子 Trust gmmx133 3***@qq.com l***@163.com lhyh 1***@qq.com 刘小弟 9***@qq.com 2***@qq.com 8***@qq.com

要回复文章请先登录注册

DCloud_heavensoft

DCloud_heavensoft (作者)

回复 2***@qq.com :
回错贴了吧
2018-11-05 00:04
2***@qq.com

2***@qq.com

在PC端webkit浏览器下,全屏代码如下:
进入全屏: videoContainer(对应的dom).webkitRequestFullscreen();
退出全屏: document.webkitCancelFullScreen();
*但是经测试,在手机浏览器和Hybird模式下的手机环境中都无法使用,
应该是手机浏览器中video 播放器的全屏模式和pc端的有区别,已经脱离了webkit的全屏组件,而是用原生自己实现的.
2018-11-04 23:39
老哥教教我

老哥教教我

回复 DCloud_heavensoft :
虽然原生的,页面顶部加上form表单输入框还是被顶起 ,但是输入法上来还是被顶起来,有没有办法不顶起来!
2017-07-23 19:12
wuhanwhite

wuhanwhite

要是能举例说明一下就更好了。
2017-07-06 10:25
s***@vip.qq.com

s***@vip.qq.com

mark~
2017-05-05 14:24
gmmx133

gmmx133

mask
2017-02-11 18:02
DCloud_heavensoft

DCloud_heavensoft (作者)

回复 maq :
动画时有个参数,WebviewExtraOptions里的acceleration里的capture,这个是避免白屏的调节参数
2017-01-01 00:30
若末lan

若末lan

受教了,谢谢~~~
2016-07-11 14:34
天龙

天龙

学习了!很不错
2016-03-16 07:50
B5教程网

B5教程网

学习了
2016-03-12 12:25