| 主要(Want)聚集在(Exist)以(By)下幾個(Indivual)方面： 1、動畫 動畫有很多種，比如側邊欄菜單的(Of)滑入滑出(Out)、元素的(Of)響應動畫、頁面切換之間的(Of)過場等等，在(Exist)H5之下的(Of)衆多實現方法都沒有辦法達到純原生的(Of)性能。一(One)般這(This)些的(Of)話有幾種不(No)同的(Of)選擇：css3動畫、javascript動畫、原生動畫。 css3動畫非常的(Of)消耗性能，如果某一(One)個(Indivual)元素用(Use)到css3動畫可能還看不(No)出(Out)來(Come)，但大(Big)面積或過場使用(Use)css3動畫會讓app低端手機體驗非常差。最好的(Of)選擇一(One)般是(Yes)通過框架調用(Use)底層的(Of)動畫，但不(No)管怎麽樣等于(At)在(Exist)原來(Come)的(Of)代碼上(Superior)包上(Superior)了(Got it)一(One)層，性能還是(Yes)不(No)可避免的(Of)受到影響。 比如在(Exist)一(One)個(Indivual)新頁面的(Of)載入上(Superior)，如果調用(Use)底層動畫要(Want)考慮的(Of)問題有兩個(Indivual)，一(One)個(Indivual)是(Yes)本身資源頁面的(Of)渲染問題，另一(One)個(Indivual)是(Yes)遠程數據的(Of)獲取。即便是(Yes)這(This)些動畫能夠很快的(Of)響應，但大(Big)量的(Of)css頁面會導緻渲染卡頓，滑入時(Hour)可能會有白屏/機器卡頓的(Of)現象。爲(For)了(Got it)解決這(This)些性能問題又必須要(Want)用(Use)到預加載或模拟動畫。即便是(Yes)這(This)樣，滑入滑出(Out)的(Of)動畫在(Exist)低端的(Of)安卓機器上(Superior)還是(Yes)有很多問題，如果獲取服務端數據處理的(Of)方式不(No)合适，卡頓白屏的(Of)現象會更嚴重。具體看下面的(Of)數據獲取方式。 2、獲取服務端數據 首先要(Want)接受的(Of)是(Yes)，這(This)裏的(Of)數據獲取都是(Yes)在(Exist)資源頁面上(Superior)異步完成的(Of)，因爲(For)隻有這(This)樣才能讓這(This)些資源頁面完成預加載或者渲染。但是(Yes)異步拿到的(Of)數據在(Exist)填入頁面中時(Hour)可能會涉及DOM操作(Do)，衆所周知，DOM操作(Do)非常消耗性能，如果頁面小還好，頁面稍大(Big)數據稍微複雜一(One)點，頻繁的(Of)DOM操作(Do)會導緻明顯的(Of)閃白。而且最重要(Want)的(Of)一(One)點是(Yes)，如果頁面加載進來(Come)之後數據更新的(Of)速度太慢，也會讓頁面模闆等待很長時(Hour)間，對用(Use)戶體驗又不(No)友好，總不(No)能每次打開都像浏覽器一(One)樣等待刷新是(Yes)吧。 這(This)個(Indivual)問題如果沒有得到解決，H5APP是(Yes)很難承擔大(Big)規模數據的(Of)頁面，在(Exist)它們之中頻繁切換更是(Yes)難上(Superior)加難，那麽肯定有人(People)也會想到用(Use)MVVM的(Of)方式，其實我(I)也寫過一(One)些基于(At)MVVM的(Of)H5APP，相對來(Come)說它們獲取數據和(And)更新數據的(Of)方式更敏捷更科學，但寫的(Of)過程中又要(Want)注意很多H5獨有的(Of)問題，這(This)些問題在(Exist)下面的(Of)頁面切換裏來(Come)講。 3、頁面切換 上(Superior)面我(I)們看到了(Got it)幾種不(No)錯的(Of)實現方式，比如預加載和(And)模拟動畫，甚至有批量的(Of)預加載，批量的(Of)截圖模拟動畫等等，雖然看起來(Come)很友好解決了(Got it)不(No)少問題，但事實上(Superior)如果頁面足夠多就會引發另一(One)個(Indivual)問題——頁面的(Of)生存周期。 試想一(One)下，如果引導頁或者主頁面緩存了(Got it)5個(Indivual)子頁面的(Of)資源，在(Exist)跳轉到響應的(Of)子頁面時(Hour)又會緩存這(This)些子頁面的(Of)下級頁面資源，如此反複肯定會占據大(Big)量内存使APP的(Of)體驗下降。那麽怎麽知道那些頁面是(Yes)需要(Want)的(Of)，最多緩存多少頁面，什麽時(Hour)候結束哪些頁面的(Of)生存周期呢？在(Exist)我(I)用(Use)過的(Of)很多H5APP的(Of)框架裏都沒有對這(This)些問題有一(One)個(Indivual)完美的(Of)解答，因此在(Exist)頁面較多内容較多的(Of)APP中可能會因這(This)些資源分配的(Of)問題降低性能。 這(This)時(Hour)候我(I)們回過頭來(Come)再看看MVVM的(Of)數據加載問題，實際上(Superior)不(No)管哪個(Indivual)MVVM框架，寫過的(Of)人(People)都知道管理這(This)種新型的(Of)前端代碼最重要(Want)的(Of)問題是(Yes)内存的(Of)問題，你既要(Want)保證代碼寫的(Of)足夠優雅沒有任何内存洩露問題，也要(Want)考慮到在(Exist)頁面生存周期結束時(Hour)它們的(Of)控制器/頁面資源是(Yes)否得到釋放，這(This)對全局有沒有什麽影響，在(Exist)多個(Indivual)請求時(Hour)也要(Want)合理的(Of)分配資源，甚至是(Yes)複用(Use)這(This)些父級頁面傳過來(Come)的(Of)緩存資源等等。較小的(Of)APP可能并不(No)會有這(This)些問題，如果你想用(Use)純H5來(Come)開發大(Big)型APP，這(This)很可能會浪費你很多時(Hour)間——而且結果還不(No)會讓你滿意。 4、Android/iOS的(Of)區别 很多人(People)都說純H5APP一(One)次編寫就能編譯Android/iOS兩種不(No)同的(Of)APP，大(Big)大(Big)降低了(Got it)成本。實際上(Superior)這(This)個(Indivual)觀點本身就是(Yes)值得懷疑的(Of)，如果你寫過這(This)類APP就能明白我(I)在(Exist)說什麽，它們既不(No)省事，又存在(Exist)很多BUG，調試時(Hour)尤其繁瑣。舉一(One)個(Indivual)很簡單的(Of)例子，Android和(And)iOS在(Exist)返回上(Superior)一(One)頁的(Of)處理方式上(Superior)就有明顯的(Of)區别，iOS的(Of)頂部bar在(Exist)全屏下怎樣處理，Android機器出(Out)現smart bar怎樣處理頁面的(Of)布局，調用(Use)底層硬件時(Hour)怎樣區分不(No)同的(Of)場景等等，你需要(Want)寫一(One)個(Indivual)又一(One)個(Indivual)機型和(And)系統的(Of)判斷，然後分别在(Exist)Android和(And)iOS下調試，最後你卻發現這(This)并沒有卵用(Use)，累的(Of)要(Want)死卻什麽沒學到，隻有一(One)堆不(No)知道什麽時(Hour)候會過時(Hour)的(Of)經驗。 現在(Exist)做H5混合APP開發的(Of)人(People)很多，但是(Yes)純H5卻很年輕，很多問題都沒有很好的(Of)解決，這(This)幾個(Indivual)是(Yes)我(I)在(Exist)做這(This)些APP時(Hour)考慮最多的(Of)問題。最後說一(One)個(Indivual)很少人(People)注意到的(Of)H5優勢，大(Big)家大(Big)談H5APP時(Hour)都是(Yes)快速開發、低成本、多平台等等，但我(I)卻覺得它和(And)很多APP開發方式相比有一(One)個(Indivual)不(No)同之處——圖文混合的(Of)排版。正是(Yes)這(This)些複雜多變的(Of)CSS樣式消耗了(Got it)性能，但是(Yes)它帶來(Come)了(Got it)排版的(Of)多樣性，能夠細緻到每一(One)個(Indivual)字寬行高和(And)風格的(Of)像素級處理，才是(Yes)H5的(Of)優異之處。 |
嘉興雷鳥是(Yes)一(One)家集企業軟件開發，WEB網站建設，移動APP制作(Do)等綜合型的(Of)互聯網公司，爲(For)嘉興顧客提供一(One)站式的(Of)企業軟件開發，安卓app開發，ios開發服務，同時(Hour)爲(For)嘉興企業提供全面移動互聯軟件技術解決方案，是(Yes)嘉興知名的(Of)綜合型APP軟件外包開發公司。根據前期調研方案和(And)客戶實際需求，以(By)專業獨到的(Of)設計理念、精益求精的(Of)技術精神、嚴格完善的(Of)品控系統，爲(For)嘉興每一(One)位客戶提供專屬的(Of)移動互聯軟件技術解決方案。經過不(No)斷積累，嘉興雷鳥陸續推出(Out)視頻直播APP、電商商城APP、P2P網貸APP、智能硬件APP開發、移動APP開發、微信公衆平台開發、一(One)元購APP、智慧社區服務APP、生活服務O2O系統APP等各類APP産品，爲(For)嘉興各行企業向移動互聯網轉型奠定了(Got it)堅實基礎。在(Exist)激烈的(Of)市場競争中，嘉興雷鳥創造了(Got it)嘉興軟件定制開發行業的(Of)卓越口碑，是(Yes)具有更高品質的(Of)移動互聯網軟件技術定制服務商。
