51ZionLin
51ZionLin
  • 发布:2017-04-25 17:41
  • 更新:2017-04-25 17:41
  • 阅读:7518

浅谈hbuilder开发app后的优化 - (1)加速启动,优化体验

分类:HTML5+

前言:
我相信使用hbuilder的开发者,大多数是因为html5开发周期短,实现功能快而使用,当然使用混合开发我相信也是比较少的,至少目前我看到的比较少。那么在这种情况下,我简单的认为大多数开发者使用的是纯hbuilder作为开发环境,那么可优化空间便局限在html原生+plusSDK这儿,因此我仅仅是分享平时在开发中,个人采用的各种优化方法。

(1)加速启动,优化体验
首先我们回顾下打开app走的一个简单的流程:
1.手指点击

  1. 载入Activity
  2. 载入Splashscreen
  3. 载入webview
  4. 渲染页面
  5. closeSplashscreen
  6. 完成工作
    备注:
    Activity:安卓原生Activity
    Splashscreen:实则为一个View,称之为"启动页"
    webview:很多人简称“浏览器”
    至此我们思考下,如何进行处理比较好,这儿我给各位简单分析一下显示层级:
    Activity < webview < Splashscreen < plus.Native.View

那么加载速度呢?
Activity > Splashscreen = plus.Native.View > webview
从而我们可以看到,当启动Activity之后,随着Splashscreen会显示出来,其次就是plus.Native.View控件。
然而plus.Native.View控件的显示层级又高于Splashscreen,因此new plus.Native,View();ViewObject.show()之后,新建的View会显示在Splashscreen上面,这样我们就可以制造一个快速启动的假象。

题外话:<script src="html5plus://ready"></script>可以加速plusAPI生效,您知道了了么?对我来说是写在<meta charset="utf-8">下面,这样不会出现乱码问题,且不影响页面。

接下来,进入代码阶段:
1:我们需要在manifest.json中配置启动页的关闭方式:


可能有人注意到,为什么不是手动关闭启动页而是延迟10s关闭启动页呢?因为在测试过程有一部魅蓝手机出现自动关闭启动页,而且是很快的自动关闭,因此根据页面逻辑我选择设置延迟10s关闭,因此没有了此问题。
2:我们需要把index.html当作一个启动处理中心,在index.html创建两个View,一个作为header,一个作为footer,随着立即显示
(创建底部栏可以采用我开源的http://ask.dcloud.net.cn/article/1276 创建顶部栏官方有教程)
View.show()之后立即执行closeSplashscreen
这一个过程很快,在我的Nexus6plus上是一瞬间执行完毕,这就有种启动速度很快的感觉了。这个时候我们需要进行如下操作,将其转到正常的app页面。

 plus.NativeUI.showWaiting()  //显示雪花滚动,等待样式  
 var wm = plus.webview.create("main.html") //创建app主页面  
       wm.addEventListener("loaded",function(){  
             plus.webview.show(id,"none",0,function(){  
                    //此时关闭View和关闭雪花滚动  
                    plus.NativeUI.closeWaiting()  
             });  
       })

//等待webview加载完毕之后再显示
至此我们就可以制造一个快速启动的错觉,再利用雪花滚动的过程ajax同步加载数据,等待渲染完毕之后再载入wm
相对于上面这种显示方法,我个人比较常用的是将

        wm.addEventListener("loaded",function(){  
             plus.webview.show(id,"none",0,function(){  
                    //此时关闭View和关闭雪花滚动  
                    plus.NativeUI.closeWaiting()  
             });  
       })

放在main.html中,改为ajax请求完成,填充完内容之后在调用

              plus.webview.show(id,"none",0,function(){  
                    //此时关闭View和关闭雪花滚动  
                    plus.NativeUI.closeWaiting()  
             });

这样可以更直观的感觉滚动完雪花后加载的是一个完整页面。
但是记得ajax要加上timeout的处理。
如果使用vue的话,则需要在vue的Methods中进行页面填充处理
随后调用vue本身带的this.$nextTick监听是否渲染完毕,渲染完毕之后再关闭view和雪花滚动。

我相信很多人看起来一头雾水,然而懂的人自然明白如何操作,这仅仅是本人优化APP的一些方法,做出来分享而已,希望能给大家带来帮助。
后面再继续分享一些其他开发中遇到的问题以及一些优化的方法。

10 关注 分享
小资电脑 Trust DCloud_heavensoft f***@163.com wenju 菜鸡 漠 1***@qq.com 8***@qq.com Geeker

要回复文章请先登录注册

8***@qq.com

8***@qq.com

mark
2018-08-14 11:05
漠

回复 DCloud_heavensoft :
大哥,你倒是出一个完整点的教程啊
2017-11-27 18:27
sin2x

sin2x

@DCloud_heavensoft 8.1.1什么时候发布?
还有这个问题确认了吗?http://ask.dcloud.net.cn/question/29426
谢谢 !
2017-04-27 10:19
DCloud_heavensoft

DCloud_heavensoft

赞深度思考和分享精神!

手动关闭splash未生效是HBuilder8.1的bug,不好意思,已经在8.1.1修复,http://ask.dcloud.net.cn/article/1311。

我也探讨探讨不同的启动优化思路。
首页的title,可以在manifest里配置,因为是原生绘制,要比webview快不少。
底部的tab,我觉得使用双首页比较好。在manifest里配置secondwebview,由laucherwebview加载tab,secondwebview加载内容页。
tab那个webview里面加载一个很素的HTML,不引外部css和js,也不依赖js渲染,简单的js注册下点击切换事件,也不要提前让plus生效。我们说webview渲染比原生慢很多,其实锅主要是js背,如果页面渲染是很简单的HTML,webview和原生的渲染速度差距会大幅减少。
然后manifest里配置splash关闭时间为titleUpdate,可以非常早的关闭splash。
我没写代码对比,但我感觉这种思路在理论上执行更快。
2017-04-26 06:45
小资电脑

小资电脑

挺好的分享,谢谢
2017-04-25 21:29