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

本文轉自mfrbuaa部落格園部落格，原文連結：http://www.cnblogs.com/mfrbuaa/p/5244264.html，如需轉載請自行聯絡原作者