H5開發是否會取代APP開發？

現在越來(lái)越多(duō)的(de)APP裏面會加入很多(duō)的(de)H5的(de)頁面，這(zhè)種Hybrid App(混合模式移動應用(yòng))的(de)開發模式越來(lái)越受歡迎。甚至還(hái)有一些純H5的(de)APP，這(zhè)樣的(de)APP開發效率快(kuài)很多(duō)，一套代碼可(kě)以安卓IOS共用(yòng)。在H5技術越來(lái)越成熟的(de)背景下(xià)，H5會取代原生的(de)APP開發嗎？

現在看來(lái)，一些純H5的(de)APP，雖然開發起來(lái)的(de)确很快(kuài)很舒服，但和(hé)原生比起來(lái)純H5APP還(hái)是有很多(duō)問題，主要聚集在以下(xià)幾個(gè)方面：

 

1、動畫(huà)效果方面

動畫(huà)有很多(duō)種，比如側邊欄菜單的(de)滑入滑出、元素的(de)響應動畫(huà)、頁面切換之間的(de)過場(chǎng)等等，在H5之下(xià)的(de)衆多(duō)實現方法都沒有辦法達到純原生的(de)性能。一般這(zhè)些的(de)話(huà)有幾種不同的(de)選擇：css3動畫(huà)，javascript動畫(huà)，原生動畫(huà)。

css3動畫(huà)非常的(de)消耗性能，如果某一個(gè)元素用(yòng)到css3動畫(huà)可(kě)能還(hái)看不出來(lái)，但大(dà)面積或過場(chǎng)使用(yòng)css3動畫(huà)會讓app低端手機體驗非常差。最好的(de)選擇一般是通(tōng)過框架調用(yòng)底層的(de)動畫(huà)，但不管怎麽樣等于在原來(lái)的(de)代碼上包上了(le)一層，性能還(hái)是不可(kě)避免的(de)受到影(yǐng)響。

 

2、獲取服務端數據

首先要接受的(de)是，這(zhè)裏的(de)數據獲取都是在資源頁面上異步完成的(de)，因爲隻有這(zhè)樣才能讓這(zhè)些資源頁面完成預加載或者渲染。但是異步拿到的(de)數據在填入頁面中時(shí)可(kě)能會涉及DOM操作，衆所周知，DOM操作非常消耗性能，如果頁面小還(hái)好，頁面稍大(dà)數據稍微複雜(zá)一點，頻(pín)繁的(de)DOM操作會導緻明(míng)顯的(de)閃白。

而且最重要的(de)一點是，如果頁面加載進來(lái)之後數據更新的(de)速度太慢(màn)，也(yě)會讓頁面模闆等待很長(cháng)時(shí)間，對(duì)用(yòng)戶體驗又不友好，總不能每次打開都像浏覽器一樣等待刷新是吧。

 

3、頁面切換

上面我們看到了(le)幾種不錯的(de)實現方式，比如預加載和(hé)模拟動畫(huà)，甚至有批量的(de)預加載，批量的(de)截圖模拟動畫(huà)等等，雖然看起來(lái)很友好解決了(le)不少問題，但事實上如果頁面足夠多(duō)就會引發另一個(gè)問題：頁面的(de)生存周期。

試想一下(xià)，如果引導頁或者主頁面緩存了(le)5個(gè)子頁面的(de)資源，在跳轉到響應的(de)子頁面時(shí)又會緩存這(zhè)些子頁面的(de)下(xià)級頁面資源，如此反複肯定會占據大(dà)量内存使APP的(de)體驗下(xià)降。那麽怎麽知道那些頁面是需要的(de)，最多(duō)緩存多(duō)少頁面，什(shén)麽時(shí)候結束哪些頁面的(de)生存周期呢(ne)？在我用(yòng)過的(de)很多(duō)H5APP的(de)框架裏都沒有對(duì)這(zhè)些問題有一個(gè)完美(měi)的(de)解答(dá)，因此在頁面較多(duō)内容較多(duō)的(de)APP中可(kě)能會因這(zhè)些資源分(fēn)配的(de)問題降低性能。

 

4、Android/iOS的(de)區(qū)别

很多(duō)人(rén)都說純H5APP一次編寫就能編譯Android/iOS兩種不同的(de)APP，大(dà)大(dà)降低了(le)成本。實際上這(zhè)個(gè)觀點本身就是值得(de)懷疑的(de)，如果你寫過這(zhè)類APP就能明(míng)白我在說什(shén)麽，它們既不省事，又存在很多(duō)BUG，調試時(shí)尤其繁瑣。

舉一個(gè)很簡單的(de)例子，Android和(hé)iOS在返回上一頁的(de)處理(lǐ)方式上就有明(míng)顯的(de)區(qū)别，iOS的(de)頂部bar在全屏下(xià)怎樣處理(lǐ)，Android機器出現smart bar怎樣處理(lǐ)頁面的(de)布局，調用(yòng)底層硬件時(shí)怎樣區(qū)分(fēn)不同的(de)場(chǎng)景等等，你需要寫一個(gè)又一個(gè)機型和(hé)系統的(de)判斷，然後分(fēn)别在Android和(hé)iOS下(xià)調試，最後你卻發現這(zhè)并沒有卵用(yòng)，累的(de)要死卻什(shén)麽沒學到，隻有一堆不知道什(shén)麽時(shí)候會過時(shí)的(de)經驗。

 

現在做(zuò)H5混合APP開發的(de)人(rén)很多(duō)，但是純H5卻很年輕，很多(duō)問題都沒有很好的(de)解決。當然大(dà)家也(yě)不必擔心，硬件發展越來(lái)越快(kuài)，純H5APP未必沒有一席之地。最後說一個(gè)很少人(rén)注意到的(de)H5優勢，大(dà)家大(dà)談H5APP時(shí)都是快(kuài)速開發、低成本、多(duō)平台等等，但我卻覺得(de)它和(hé)很多(duō)APP開發方式相比有一個(gè)不同之處——圖文混合的(de)排版。

正是這(zhè)些複雜(zá)多(duō)變的(de)CSS樣式消耗了(le)性能，但是它帶來(lái)了(le)排版的(de)多(duō)樣性，能夠細緻到每一個(gè)字寬行高(gāo)和(hé)風格的(de)像素級處理(lǐ)，才是H5的(de)優異之處。