lyzcren
lyzcren
  • 发布:2016-10-17 15:17
  • 更新:2016-10-17 15:17
  • 阅读:3095

关于MUI提前注入5+API的尝试

分类:HBuilder

原文地址:http://blog.csdn.net/u012843100/article/details/52838928
HBuilder是在开发hybrid app时不错的工具。为了使hybrid app的性能更加接近原生,程序猿们做了很多努力。例如近日在HBuilder7.5.0版本中,增加了一个振奋人心的特性。

Android平台新增提前注入5+ API,支持在plusready事件前调用,具体参考http://ask.dcloud.net.cn/article/921  

以往在5+ Runtime环境中,通常情况下需要html页面解析完成后才会注入5+ API,执行的顺序为:

  1. 加载html页面
  2. 解析html页面(下载script/link等节点引用的资源,如js/css文件)
  3. 触发DOMContentLoaded事件
  4. 注入5+ API
  5. 触发plusready事件

这样导致5+ API生效时间比较延后,在html中引用js执行之后才能调用5+ AP,于是很多人选择在plusready时间中编写逻辑代码,这样写的最大缺点是使脚本的执行时间稍微延后了,如果在页面的DOMContentLoaded(mui.ready)事件中处理逻辑代码,会在一定程度上提升页面加载速度。但是,往往在逻辑代码中需要调用5+API,怎么办呢?
于是在不断对性能较为挑剔的程序猿们先在ready事件中处理与5+API无关的页面逻辑(渲染页面等);然后在plusready事件中处理需要调用5+API的逻辑代码。这样在一定程序上提升了APP的体验及速度,但却使代码分散各处,不利于管理。

此次提前加载5+API突破了这个限制,以下是官方示例:

在HBuilder7.5版本之后将支持提前注入5+ API,可以在plusready事件触发之前调用5+ API,操作方法是在页面中添加以下节点:
<script src="html5plus://ready"/>,示例如下:

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8"/>  
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>  
        <title>HTML5+ API</title>  
        <script src="html5plus://ready"/>  
        <script type="text/javascript" charset="utf-8">  
// 这里可以调用5+ API了,为了更好的兼容性,应该使用以下代码进行判断  
if(window.plus){  
    // 在这里调用5+ API  
}else{// 兼容老版本的plusready事件  
    document.addEventListener('plusready',function () {  
        // 在这里调用5+ API  
    },false);  
}  
        </script>  
    </head>  
    <body>  
Hello HTML5 plus.  
    </body>  
</html>

注意

  1. 仅仅是提前注入5+ API,并不会提前触发plusready事件(仅步骤4提前操作了)
  2. Android3.0及以上平台才支持提前注入,Android2.*版本无法提前注入
  3. 在流应用环境中的wap2app会自动提前注入(第一次引用网络js时注入),不需要添加<script src="html5plus://ready"/>节点

官方示例中,通过判断判断window.plus对象来判断plus模块是否已经加载完毕,如果加载完毕则可直接调用,由于plusready事件并没有提前,所以如同以往使用

document.addEventListener('plusready',function () {  
// 在这里调用5+ API  
},false);  
来添加监听,跟以往没有任何差别。

但是在使用过程中,我发现5+API可能在mui对象加载完毕前已经加载好了,于是在官方示例中的if语句成立时调用mui方法会导致mui未定义的情况。所以我把实例中的:

if(window.plus)
改成:

if(window.plus && window.mui)

但是这样如果plus加载完毕但mui未加载完毕时可能在效率上并没有提升。所以我又做了一下修改,在mui.ready中调用window.plus判断:

mui.ready(function(){  
    if(window.plus){  
        // 在这里调用5+ API  
    }else{// 兼容老版本的plusready事件  
    document.addEventListener('plusready',function () {  
        // 在这里调用5+ API  
    },false);  
}  
});

这样似乎在性能上有一定提升,但我并不确定这样是否是最好的方法,或者这样是否会导致其他问题,还望指点。

另外,使用官方示例过程中还有一点不是很确定,就是在if(window.plus)中处理dom元素时可能会出现找不到的情况,此时将<script src="html5plus://ready"></script>注释掉就不会了。初步猜测可能是因为plus对象在DOMContentLoaded前就已经加载完毕了,此时页面并未渲染完造成的。

H5 app的优化之路还很长,继续埋头写代码去了。

2 关注 分享
lhyh Trust

要回复文章请先登录注册