原文地址：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 个评论
要回复文章请先登录或注册