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