[重磅] 让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控制显示到前台。


- 一、预载，新页面基础模板。使用时直接调出来
在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的真机执行，就能够看到效果。


- 二、现载，后台建立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框架拖了你的后腿。