[重磅] 让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框架拖了你的后腿。