非常多人都想、甚至曾使用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.htmlwebviewShow.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框架拖了你的后腿。

轉載于:https://www.cnblogs.com/mfrbuaa/p/5244264.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。