[重磅] 让HTML5达到原生的体验 系列之中的一个 避免切页白屏

非常多人都想、甚至曾使用HTML5开发跨平台App。而且想达到原生App的体验。

最后的结果都是无奈的放弃。HTML5貌似美好,但坑太多。想做到原生App的体验差点儿不可为。

也曾有过著名的facebook放弃HTML5改用原生做App的事件。

可是坑多不怕,就怕没人填。

本系列文章。就将我在开发中的各种HTML5的坑怎样解决。一一道给大家。

HTML5的性能体验比原生差。体如今非常多方面。比方切页时白屏、Android上列表滚动不流畅、下拉刷新和上拉翻页卡顿。

尤其在低端Android手机上,表现差距很明显。

我们首先来看第一个问题,怎样避免切页白屏。

浏览器的页面在切换时。因为其页面载入机制,在跳转到下一个页面时,先要请求联网、载入页面代码、构建dom、渲染,最后才显示出来。

在终于结果渲染完成前,会出现几十毫秒甚至数秒的白屏。原生App是没有这个问题的。

尽管使用SPA应用模型,即ajax+div切换也能够避免白屏,但把全部页面写在一个SPA页面里,手机上也跑不起来。





办法事实上是有的,须要使用扩展的手段。

HBuilder(http://www.dcloud.net.cn)工具里。内置了[HTML5+](http://www.html5plus.org)的规范API,它把几十万原生API映射为js对象。

想要解决切页白屏这个问题。须要使用plus.webview类来做MPA应用。

plus.webview类是对原生的webview对象的js化封装。使用js能够操作webview。

解决白屏的原理是:**把每一个页面当作一个webview,但用js来控制它就像控制div一样。

**

由于webview能够隐藏创建。后台加载内容,而且在加载完成时有js事件通知。我们能够利用它做窗口切换。从而避免白屏。

通过操作webview来避免切页白屏,有2种常见的做法:  

一种是称之为预载,即后台预载新页面的基础文件。使用时直接调出来;

还有一种称之为现载,即点击前页的链接開始走waiting转圈,后台载入完整的新页面,载入完再用js控制显示到前台。





- 1、预载,新页面基础模板。使用时直接调出来

在HBuilder里新建App时有一个csdn的项目源代码。这个应用就是使用了预载思路。

启动首先载入资讯列表list页面,然后延时创建了一个隐藏的webview。载入了一个内容模板show页面(app/show.html)。

在点击list页面的一个新闻item时,调用webview的窗口控制动画,把show页面側滑进屏幕。

但show页面不过一个模板而没有数据,在show页面刚側滑进屏幕时,在show页面有一个正在联网的提示。

紧接着show页面開始运行ajax请求,联网载入数据并显示出来。

我们能够在list页面的item点击里。一边移动窗口。一边通知新页面运行ajax。

webview间相互传递消息使用webview的evalJS方法。

这样的做法,相当于用户是在show页面来等待联网数据。

预载入,尽管仅仅载入模板。但占用的内存资源较多。

假设是list转到content,事实上不同的item点击仅仅是一个页面,全然能够使用预载。

但假设页面不同且较多,后台预载太多webview还是会消耗不少系统资源,有可能在低配Android手机上不流畅。

(webview隐藏会减少内存占用。一般处于显示状态的webview不要超过3个)。

演示样例代码例如以下:

var webviewShow;
document.addEventListener('plusready', function(){ //扩展的js对象在plusready后方可使用
webviewShow = plus.webview.create("show.html"); //后台创建一个webview。加载show.html文件
});
function clicklist (id) { //list点击item后的事件
webviewShow.show("slide-in-right",300); //<span style="font-family: Arial, Helvetica, sans-serif;">把新webview窗口显示出来。显示动画效果为速度300毫秒的右側移入动画</span>
}

在HBuilder里新建一个移动App。构造好index里的list或button。把show页面准备好,把上述js代码复制进去,手机插上数据线连电脑,点HBuilder的真机执行,就可以看到效果。





- 2、现载,后台创建webview载入新页面完整内容。渲染后再显示到前台

假设认为内存消耗多。能够不预载页面。

当点击list页面的item时。首先绘出一个联网等待框,比方plus.nativeui里的原生waiting。

紧接着在后台create一个webview,加载show页面。

show页面在后台联网获取数据。

show页面在数据解析渲染后,再通过evalJS方法通知list页面关闭等待框,并运行窗口切换把show页面显示出来。

演示样例代码例如以下:

function clicklist (id) { //list点击item后的事件
var nwaiting = plus.nativeUI.showWaiting();//显示原生等待框
webviewShow = plus.webview.create("show.html");//后台创建webview并打开show.html
webviewShow.addEventListener("loaded", function() { //注冊新webview的加载完毕事件
nwaiting.close(); //新webview的加载完毕后关闭等待框
webviewShow.show("slide-in-right",300); //把新webview窗口显示出来,显示动画效果为速度300毫秒的右側移入动画
}, false);
}

### 另一个须要注意的白屏问题。是启动后第一个页面的白屏。第一个页面是无法隐藏创建的。

假设第一个页面内容较大或联网,会出现启动封面图片消失后,页面还没渲染好。

此时须要手动控制封面图片消失。

首先在manifest.json里找到plus、splashscreen、autoclose节点,设置为false,即手动控制封面图片的消失。

然后在首页合适的位置,一般在联网并构造完新的dom时。调用js关闭封面图片,plus.navigator.closeSplashscreen();

这样就能防止第一个页面的白屏。





### 后记

无论使用哪种方法。都要注意一点,手机App的HTML页面必须本身性能足够高。

页面体积要小、载入和渲染要快。

互联网上有非常多提升HTML、JS、CSS、图片性能的方案。此处不再罗列。

但务必注意一点,尽量不要使用js框架。

pc上web框架的盛行。也是后来pc浏览器性能足够高之后的事情。互联网发展初期的开发人员并不像现在这般依赖框架。

手机,尤其是低端Android机的性能也非常差,假设照着写pc web的思路写页面,终于的用户体验必定会非常差。

首先。AMD框架不要想了,js动态解析标签再替换渲染根本来不及。

其次。jquery、zepto也尽量不要使用。

document.getElementById("") 、document.querySelectorAll("")、$(""),这三者性能依次下降。尤其是在低端Android上遍历dom时,当你辛辛苦苦降低白屏和用户等待时间时。你会很愤慨这些js框架拖了你的后腿。

上一篇:<< CocoaPods安装和使用教程 >>github code4app以及cocoachina 苹果官方文档


下一篇:Android中对闹钟Alarm的事件处理