H5網(wǎng)頁App開發(fā)和純原生的App的差距主要聚集在以下幾個方面：

        1、動畫

        動畫有很多種，比如側(cè)邊欄菜單的滑入滑出、元素的響應(yīng)動畫、頁面切換之間的過場等等，在H5之下的眾多實現(xiàn)方法都沒有辦法達(dá)到純原生的性能。常熟app開發(fā)是指專注于手機(jī)應(yīng)用軟件開發(fā)與服務(wù)。 一般這些的話有幾種不同的選擇：css3動畫、javascript動畫、原生動畫。

        css3動畫非常的消耗（consume)性能，如果某一個元素用到css3動畫可能（maybe)還看不出來，但大面積或過場使用css3動畫會讓app低端手機(jī)體驗非常差。最好的選擇一般是通過框架(framework)調(diào)用底層的動畫，但不管怎么樣等于在原來的代碼（code）上包上了一層，性能還是不可避免的受到影響。

        比如在一個新頁面的載入上，如果調(diào)用底層動畫要考慮（consider)的問題有兩個，一個是本身資源頁面的渲染問題，另一個是遠(yuǎn)程數(shù)據(jù)（data)的獲取(obtain)。即便是這些動畫能夠很快的響應(yīng)，但大量的css頁面會導(dǎo)致渲染卡頓，滑入時可能（maybe)會有白屏/機(jī)器卡頓的現(xiàn)象。為了解決這些性能問題又必須要用到預(yù)加載或模擬(定義:對真實事物或者過程的虛擬)動畫。即便是這樣，滑入滑出的動畫在低端的安卓機(jī)器上還是有很多問題，如果獲取服務(wù)端(Server)數(shù)據(jù)處理的方式不合適，卡頓白屏的現(xiàn)象會更嚴(yán)重。具體看下面的數(shù)據(jù)獲取方式。



        2、獲取(obtain)服務(wù)端(Server)數(shù)據(jù)（data)

        首先要接受的是，這里的數(shù)據(jù)（data)獲取(obtain)都是在資源頁面上異步完成的，因為只有這樣才能讓這些資源頁面完成預(yù)加載或者渲染。但是異步拿到的數(shù)據(jù)（data)在填入頁面中時可能（maybe)會涉及(to involve)DOM操作，眾所周知，DOM操作非常消耗（consume)性能，如果頁面小還好，頁面稍大數(shù)據(jù)(Data Mining)（data)稍微復(fù)雜一點，頻繁（frequency)的DOM操作會導(dǎo)致明顯的閃白。而且最重要的一點是，如果頁面加載進(jìn)來之后數(shù)據(jù)（data)更新的速度太慢，也會讓頁面模板等待很長時間，對用戶訪問體驗又不友好，總不能每次打開都像瀏覽器一樣等待刷新是吧

        這個問題如果沒有得到解決，H5開發(fā)是很難承擔(dān)大規(guī)模數(shù)據(jù)（data)的頁面，在它們之中頻繁（frequency)切換更是難上加難，那么肯定有人也會想到用MVVM的方式，其實我也寫過一些基于MVVM的H5app開發(fā)，相對來說它們獲取(obtain)數(shù)據(jù)和更新數(shù)據(jù)的方式更敏捷更科學(xué)，但寫的過程中又要注意很多H5獨有的問題，這些問題在下面的頁面切換里來講。



        3、頁面切換

        上面我們看到了幾種不錯的實現(xiàn)方式，比如預(yù)加載和模擬(定義:對真實事物或者過程的虛擬)動畫，甚至有批量的預(yù)加載，批量的截圖模擬動畫等等，雖然看起來很友好解決了不少問題，但事實（Fact)上如果頁面足夠多就會引發(fā)另一個問題——頁面的生存周期。

        試想一下，如果引導(dǎo)頁或者主頁面緩存(cache)了5個子頁面的資源，在跳轉(zhuǎn)到響應(yīng)的子頁面時又會緩存這些子頁面的下級頁面資源，如此反復(fù)肯定會占據(jù)大量內(nèi)存使APP的體驗下降(descend)。那么怎么知道那些頁面是需要的，最多緩存多少頁面，什么時候結(jié)束哪些頁面的生存周期呢？在我用過的很多H5APP的框架(framework)里都沒有對這些問題有一個完美的解答，因此在頁面較多網(wǎng)站內(nèi)容較多的app開發(fā)中可能（maybe)會因這些資源分配的問題降低（reduce)性能。

         這時候我們回過頭來再看看MVVM的數(shù)據(jù)（data)加載問題，實際上不管哪個MVVM框架(framework)，寫過的人都知道管理這種新型的前端代碼（code）最重要的問題是內(nèi)存的問題，你既要保證代碼寫的足夠優(yōu)雅沒有任何內(nèi)存泄露問題，也要考慮（consider)到在頁面生存周期結(jié)束時它們的控制（control)器/頁面資源是否得到釋放，這對全局有沒有什么影響，在多個請求時也要合理的分配資源，甚至是復(fù)用這些父級頁面?zhèn)鬟^來的緩存(cache)資源等等。常熟app開發(fā)秉持拒絕平凡、突破與創(chuàng)新的理念,致力于打造高品質(zhì)的APP。常熟app開發(fā)以服務(wù)客戶滿意為第一準(zhǔn)則,較小的APP可能（maybe)并不會有這些問題，如果你想用純H5來開發(fā)大型app，這很可能會浪費你很多時間——而且結(jié)果還不會讓你滿意。



        4、Android/iOS的區(qū)別

        很多人都說純H5app開發(fā)一次編寫就能編譯Android/iOS兩種不同的APP，大大降低（reduce)了成本。實際上這個觀點本身就是值得懷疑的，如果你寫過這類APP就能明白我在說什么，它們既不省事，又存在很多BUG，調(diào)試時尤其繁瑣(fán suǒ)。舉一個很簡單的例子，Android和iOS在返回上一頁的處理方式上就有明顯的區(qū)別，iOS的頂部bar在全屏下怎樣處理，Android機(jī)器出現(xiàn)smart bar怎樣處理頁面的布局，調(diào)用底層硬件時怎樣區(qū)分不同的場景等等，你需要寫一個又一個機(jī)型和系統(tǒng)的判斷，然后分別在Android和iOS下調(diào)試，最后你卻發(fā)現(xiàn)這并沒有卵用，累的要死卻什么沒學(xué)到，只有一堆不知道什么時候會過時的經(jīng)驗（experience)。

        現(xiàn)在做H5混合APP開發(fā)的人很多，但是純H5卻很年輕，很多問題都沒有很好的解決，這幾個是我在做這些APP時考慮（consider)最多的問題。最后說一個很少人注意到的H5優(yōu)勢（解釋:能壓倒對方的有利形勢)，大家大談H5APP時都是快速開發(fā)、低成本、多平臺等等，但我卻覺得它和很多APP開發(fā)方式相比有一個不同之處——圖文混合的排版。正是這些復(fù)雜多變的CSS樣式消耗（consume)了性能，但是它帶來了排版的多樣性，能夠精細(xì)到每一個字寬行高和風(fēng)格的像素級處理，才是H5的優(yōu)異之處。