原生開發、H5開發和混合開發的區別

目前市場上主流的APP分爲三種：原生APP、Web APP（即HTML5）和混合APP三種，相對應的定 制開發就是原生開發、H5開發和混合開發。那麼這三種開發模式究竟有何不一樣呢？下面咱們就分別從這三者各自的優劣勢來區分比較吧！
1、原生開發
原生開發（Native App開發），是在Android、IOS等移動平臺上利用官方提供的開發語言、開發類庫、開發工具進行App開發。好比Android是利用Java、Eclipse、Android studio；IOS是利用Objective-C 和Xcode進行開發。
通俗點來說，原生開發就像蓋房子同樣，先打地基而後澆地梁、房屋結構、一磚一瓦、鋼筋水泥、電路走向等，都是通過精心的設計。原生APP也同樣：經過代碼從每一個頁面、每一個功能、每一個效果、每一個邏輯、每一個步驟所有用代碼寫出來，一層層，一段段全用代碼寫出來。
優勢：
一、可訪問手機全部功能（如GPS、攝像頭等）、可實現功能最齊全；
二、運行速度快、性能高，絕佳的用戶體驗；
三、支持大量圖形和動畫，不卡頓，反應快；
四、兼容性高，每一個代碼都通過程序員精心設計，通常不會出現閃退的狀況，還能防止病毒和漏洞的出現；
五、比較快捷地使用設備端提供的接口，處理速度上有優點。
缺點：
一、開發時間長，快則3個月左右完成，慢則五個月左右；
二、製做費用高昂，成本較高；
三、可移植性比較差，一款原生的App，Android和IOS都要各自開發，一樣的邏輯、界面要寫兩套；
四、內容限制（App Store限制）；
五、必須等下載完畢用戶才能夠打開，得到新版本時需從新下載應用更新。
2、Web APP (HTML5）開發
HTML5應用開發，是利用Web技術進行的App開發，能夠在手機端瀏覽器裏面打開的網站就稱之爲webapp。Web技術自己須要瀏覽器的支持才能進行展現和用戶交互，所以主要用到的技術是HTML、CSS、Javascript以及jQuery、Vue、React等JS框架。
優勢：
一、支持設備範圍廣，能夠跨平臺，編寫的代碼能夠同時在Android、IOS、Windows上運行；
二、開發成本低、週期短；
三、無內容限制；
四、適合展現有大段文字（如新聞、攻略等），且格式比較豐富（如加粗，字體多樣）的頁面；
五、用戶能夠直接使用最新版本（自動更新，不需用戶手動更新）。
缺點：
一、因爲Web技術自己的限制，H5移動應用不能直接訪問設備硬件和離線存儲，因此在體驗和性能上有很大的侷限性；
二、對聯網要求高，離線不能作任何操做；
三、功能有限；
四、APP反應速度慢，頁面切換流暢性較差；
五、圖片和動畫支持性不高；
六、用戶體驗感較差；
七、沒法調用手機硬件（攝像頭、麥克風等）。
3、混合（原生+H5）開發
混合開發（Hybrid App開發），是指在開發一款App產品的時候，爲了提升效率、節省成本而利用原生與H5的開發技術的混合應用。通俗點來講，這就是網頁的模式，一般由「HTML5雲網站+APP應用客戶端」兩部份構成。
混合開發是一種取長補短的開發模式，原生代碼部分利用WebView插件或者其它框架爲H5提供容器，程序主要的業務實現、界面展現都是利用與H5相關的Web技術進行實現的。好比京東、淘寶、今日頭條等APP都是利用混合開發模式而成的。
優勢：
一、開發效率高，節約時間。同一套代碼Android和IOS基本上均可使用；
二、更新和部署比較方便，每次升級版本只須要在服務器端升級便可，再也不須要上傳到App Store進行審覈；
三、代碼維護方便、版本更新快，節省產品成本；
四、比web版實現功能多；
五、可離線運行。
缺點：
一、功能/界面沒法自定：全部內容都是固定的，不能換界面或增長功能；
二、加載緩慢/網絡要求高：混合APP數據須要所有從服務器調取，每一個頁面都須要從新下載，所以打開速度慢，網絡佔用高，緩衝時間長，容易讓用戶反感；
三、安全性比較低：代碼都是之前的老代碼，不能很好地兼容最新手機系統，且安全性較低，網絡發展這麼快，病毒這麼多，若是不實時更新，按期檢查，容易產生漏洞，形成直接經濟損失；
四、既懂原生開發又懂H5開發的高端人才難找。

目前混合開發有兩種開發模式：
1、原生主導的開發模式：須要安卓和IOS原生開發人員，整個App既有原生開發的頁面，也有H5頁面，在須要H5頁面時由原生開發工程師實現內嵌，筆者最近正在開發的項目就使用這種開發模式。
2、H5主導的開發模式：只須要H5開發工程師，藉助一些封裝好的工具實現應用的打包與調用原生設備的功能，如HBuilder的雲端打包功能。

如何辨別原生和H5：
以最近正在開發的混合APP項目首頁爲例：

一、看斷網的狀況
把手機的網絡斷掉。而後點開頁面。而後能夠正常顯示的東西就是原生寫的。
顯示404或者錯誤頁面的是html頁面。

二、看佈局邊界
能夠打開 開發者選項中的顯示佈局邊界，頁面元素不少的狀況下佈局是一整塊的是h5的，佈局密密麻麻的是原生控件。頁面有佈局的是原生的不然爲h5頁面。（僅針對安卓手機試用）

三、看複製文章的提示，須要你經過對比才能得出結果。
好比是文章資訊頁面能夠長按頁面試試，若是出現文字選擇、粘貼功能的是H5頁面，不然是native原生的頁面。

有些原生APP開放了複製粘貼功能或者關閉了。而H5的css屏蔽了複製選擇功能等等狀況。須要經過對目標測試APP進行對比才可知。
四、看加載的方式
若是在打開新頁面導航欄下面有一條加載的線的話，這個頁面就是H5頁面，若是沒有就是原生的。 微信裏面打開咱們的H5頁面常見的有個綠色的加載線條。

五、看app頂部 導航欄是否會有關閉的操做
若是APP頂部導航欄當中出現了關閉按鈕或者有關閉的圖標，那麼當前的頁面確定的H5，原生的不會出現（除非設計開發者故意弄的）

美團的、大衆點評的APP、微信APP當加載h5過多的時候，左上角會出現關閉二字。
六、判斷頁面 下拉刷新的時候（前提是要有下拉刷新的功能）
若是界面沒有明顯刷新現象的是原生的，若是有明顯刷新現象（好比閃一下）的是H5頁面（ios和android）。
好比淘寶的衆籌頁面。
七、下拉頁面的時候顯示網址提供方的必定是H5。