H5架構和原生架構的區別

little小小 發表於 2022-02-12
1.App的3種開發方式

表面上看,手機App都是同樣的東西,就是手機上的應用程式,點選圖示就能執行,但是它們的底層技術不一樣。按照開發技術,App可以分成三大類。原生應用(簡稱nativeApp),Web應用(簡稱WebApp),混合應用(簡稱hybridApp)這三類App的技術模型都不一樣,各有優缺點。

2.原生架構

原生應用開發,是在Android、IOS等移動平臺上利用官方提供的開發語言、開發類庫、開發工具進行App開發。所以原生架構的App在應用效能上和互動體驗上應該是最好的,但是原生應用的可移植性比較差,特別是一款原生的App,Android和IOS都要各自開發,同樣的邏輯、介面要寫兩套。如微信app,既有Android版的,也有ios版的。

原生架構特點:

1. 每一種移動作業系統都需要獨立的開發專案。
2. 每種平臺都需要獨立的開發語言和工具,比如Android系統上的應用是利用java、eclipse、Android studio來進行開發,IOS系統是上的應用則是利用Objective-C和Xcode來進行開發的。
3. 更加貼近底層,因此他的操作更加的流暢,對於調取底層功能也是很容易的,如相機。
4. 開發成本高(針對不同的手機作業系統都要進行獨立的開發),開發週期長,更新迭代緩慢,上架時需要等待官方稽核通過
3.H5架構

H5開發就是值是利用Web技術(HTML5、JavaScript、CSS)進行的App開發,現在還有一些開發框架可以利用,比如phoneGap、bootstrap、jquery等。H5開發的好處是可以跨平臺,編寫的程式碼可以同時在Android、IOS、Windows上進行執行。由於Web技術本身的限制,H5移動應用不能直接訪問裝置硬體和離線儲存,所以在體驗和效能上有很大的侷限性。

H5架構特點:

1. 方便測試,只需要輸入網址就可以進行測試,是基於瀏覽器的,可以跨平臺使用。
2. 想要新增功能直接在後臺新增即可,不需要通知使用者升級。
3. 量級低,開發成本很低,而且相應的他也不需要安裝包。
4. 對網路非常依賴,一斷網就歇菜功能單一,主要用於展示,無法呼叫底層功能,比如相機。
4.H5架構與原生的區別
  1. 原生的頁面執行速度快,比較流暢。H5頁面相對原生的執行效能低,特別是一些動畫效果有明顯示卡頓。

  2. H5頁面的很多互動都沒有原生的好,比如彈層、輸入時候的頁面滑動 等。H5的效果相對比較low,沒有原生的好看,也沒有原生預設的動畫等效果。

  3. 原生APP修改頁面要重新發布,等待稽核(現在iOS的稽核速度已經提高到1天到2天)。H5頁面的修改 可以隨時上線,不用等待稽核。

  4. H5跨平臺,iOS和android可以共用一套程式碼;原生則需要各自開發相對原生,H5開發成本低。

  5. 原生APP能很好的使用裝置底層功能,如攝像頭、方向感測器、重力感測器等。H5則有所限制,比如android裡的H5對攝像頭和方向感測器就需要再多做一些處理。

  6. H5過度依賴於網路,網路不好的時候卡到不行,並且剛開啟看到的都是一個空白頁面。預設的H5頁面每次開啟都會重新請求頁面(可以做快取,不過基本很少有做的)。

  7. H5比原生更費流量,H5除了載入html還要載入js、css這些資原始檔,相比原生網路載入速度慢。