非常多人都想、甚至曾使用HTML5開發(fā)跨平臺App。而且想達到原生App的體驗。

最后的結(jié)果都是無奈的放棄。HTML5貌似美好，但坑太多。想做到原生App的體驗差點兒不可為。

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

可是坑多不怕，就怕沒人填。

本系列文章。就將我在開發(fā)中的各種HTML5的坑怎樣解決。一一道給大家。

HTML5的性能體驗比原生差。體如今非常多方面。比方切頁時白屏、Android上列表滾動不流暢、下拉刷新和上拉翻頁卡頓。

尤其在低端Android手機上，表現(xiàn)差距很明顯。

我們首先來看第一個問題，怎樣避免切頁白屏。

瀏覽器的頁面在切換時。因為其頁面載入機制，在跳轉(zhuǎn)到下一個頁面時，先要請求聯(lián)網(wǎng)、載入頁面代碼、構(gòu)建dom、渲染，最后才顯示出來。
在終于結(jié)果渲染完成前，會出現(xiàn)幾十毫秒甚至數(shù)秒的白屏。原生App是沒有這個問題的。

盡管使用SPA應用模型，即ajax+div切換也能夠避免白屏，但把全部頁面寫在一個SPA頁面里，手機上也跑不起來。


辦法事實上是有的，須要使用擴展的手段。
在HBuilder(http://www.dcloud.net.cn)工具里。內(nèi)置了[HTML5+](http://www.html5plus.org)的規(guī)范API，它把幾十萬原生API映射為js對象。
想要解決切頁白屏這個問題。須要使用plus.webview類來做MPA應用。
plus.webview類是對原生的webview對象的js化封裝。使用js能夠操作webview。

解決白屏的原理是：**把每一個頁面當作一個webview，但用js來控制它就像控制div一樣。

**
由于webview能夠隱藏創(chuàng)建。后臺加載內(nèi)容，而且在加載完成時有js事件通知。我們能夠利用它做窗口切換。從而避免白屏。

通過操作webview來避免切頁白屏，有2種常見的做法： ?
一種是稱之為預載，即后臺預載新頁面的基礎(chǔ)文件。使用時直接調(diào)出來；
還有一種稱之為現(xiàn)載，即點擊前頁的鏈接開始走waiting轉(zhuǎn)圈，后臺載入完整的新頁面，載入完再用js控制顯示到前臺。


- 1、預載，新頁面基礎(chǔ)模板。使用時直接調(diào)出來
在HBuilder里新建App時有一個csdn的項目源代碼。這個應用就是使用了預載思路。
啟動首先載入資訊列表list頁面，然后延時創(chuàng)建了一個隱藏的webview。載入了一個內(nèi)容模板show頁面（app/show.html）。
在點擊list頁面的一個新聞item時，調(diào)用webview的窗口控制動畫，把show頁面?zhèn)然M屏幕。
但show頁面不過一個模板而沒有數(shù)據(jù)，在show頁面剛側(cè)滑進屏幕時，在show頁面有一個正在聯(lián)網(wǎng)的提示。

緊接著show頁面開始運行ajax請求，聯(lián)網(wǎng)載入數(shù)據(jù)并顯示出來。
我們能夠在list頁面的item點擊里。一邊移動窗口。一邊通知新頁面運行ajax。

webview間相互傳遞消息使用webview的evalJS方法。
這樣的做法，相當于用戶是在show頁面來等待聯(lián)網(wǎng)數(shù)據(jù)。
預載入，盡管僅僅載入模板。但占用的內(nèi)存資源較多。

假設(shè)是list轉(zhuǎn)到content，事實上不同的item點擊僅僅是一個頁面，全然能夠使用預載。

但假設(shè)頁面不同且較多，后臺預載太多webview還是會消耗不少系統(tǒng)資源，有可能在低配Android手機上不流暢。

（webview隱藏會減少內(nèi)存占用。一般處于顯示狀態(tài)的webview不要超過3個）。
演示樣例代碼例如以下：

var webviewShow;
document.addEventListener('plusready', function(){ //擴展的js對象在plusready后方可使用webviewShow = plus.webview.create("show.html"); //后臺創(chuàng)建一個webview。加載show.html文件
});
function clicklist (id) { //list點擊item后的事件webviewShow.show("slide-in-right",300); //<span style="font-family: Arial, Helvetica, sans-serif;">把新webview窗口顯示出來。顯示動畫效果為速度300毫秒的右側(cè)移入動畫</span>
}

在HBuilder里新建一個移動App。構(gòu)造好index里的list或button。把show頁面準備好，把上述js代碼復制進去，手機插上數(shù)據(jù)線連電腦，點HBuilder的真機執(zhí)行，就可以看到效果。


- 2、現(xiàn)載，后臺創(chuàng)建webview載入新頁面完整內(nèi)容。渲染后再顯示到前臺
假設(shè)認為內(nèi)存消耗多。能夠不預載頁面。
當點擊list頁面的item時。首先繪出一個聯(lián)網(wǎng)等待框，比方plus.nativeui里的原生waiting。
緊接著在后臺create一個webview，加載show頁面。
show頁面在后臺聯(lián)網(wǎng)獲取數(shù)據(jù)。

show頁面在數(shù)據(jù)解析渲染后，再通過evalJS方法通知list頁面關(guān)閉等待框，并運行窗口切換把show頁面顯示出來。
演示樣例代碼例如以下：

function clicklist (id) { //list點擊item后的事件var nwaiting = plus.nativeUI.showWaiting();//顯示原生等待框webviewShow = plus.webview.create("show.html");//后臺創(chuàng)建webview并打開show.htmlwebviewShow.addEventListener("loaded", function() { //注冊新webview的加載完畢事件nwaiting.close(); //新webview的加載完畢后關(guān)閉等待框webviewShow.show("slide-in-right",300); //把新webview窗口顯示出來，顯示動畫效果為速度300毫秒的右側(cè)移入動畫}, false);
}

### 另一個須要注意的白屏問題。是啟動后第一個頁面的白屏。第一個頁面是無法隱藏創(chuàng)建的。
假設(shè)第一個頁面內(nèi)容較大或聯(lián)網(wǎng)，會出現(xiàn)啟動封面圖片消失后，頁面還沒渲染好。
此時須要手動控制封面圖片消失。

首先在manifest.json里找到plus、splashscreen、autoclose節(jié)點，設(shè)置為false，即手動控制封面圖片的消失。
然后在首頁合適的位置，一般在聯(lián)網(wǎng)并構(gòu)造完新的dom時。調(diào)用js關(guān)閉封面圖片，plus.navigator.closeSplashscreen();
這樣就能防止第一個頁面的白屏。


### 后記
無論使用哪種方法。都要注意一點，手機App的HTML頁面必須本身性能足夠高。

頁面體積要小、載入和渲染要快。
互聯(lián)網(wǎng)上有非常多提升HTML、JS、CSS、圖片性能的方案。此處不再羅列。
但務必注意一點，盡量不要使用js框架。
pc上web框架的盛行。也是后來pc瀏覽器性能足夠高之后的事情。互聯(lián)網(wǎng)發(fā)展初期的開發(fā)人員并不像現(xiàn)在這般依賴框架。
手機，尤其是低端Android機的性能也非常差，假設(shè)照著寫pc web的思路寫頁面，終于的用戶體驗必定會非常差。
首先。AMD框架不要想了，js動態(tài)解析標簽再替換渲染根本來不及。
其次。jquery、zepto也盡量不要使用。

document.getElementById("") 、document.querySelectorAll("")、$("")，這三者性能依次下降。尤其是在低端Android上遍歷dom時，當你辛辛苦苦降低白屏和用戶等待時間時。你會很憤慨這些js框架拖了你的后腿。

轉(zhuǎn)載于:https://www.cnblogs.com/mfrbuaa/p/5244264.html

總結(jié)

以上是生活随笔為你收集整理的[重磅] 让HTML5达到原生的体验 系列之中的一个 避免切页白屏的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。