原文地址: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,执行的顺序为:
- 加载html页面
- 解析html页面(下载script/link等节点引用的资源,如js/css文件)
- 触发DOMContentLoaded事件
- 注入5+ API
- 触发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>
注意
- 仅仅是提前注入5+ API,并不会提前触发plusready事件(仅步骤4提前操作了)
- Android3.0及以上平台才支持提前注入,Android2.*版本无法提前注入
- 在流应用环境中的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的优化之路还很长,继续埋头写代码去了。
0 个评论
要回复文章请先登录或注册