H5架構和原生架構的區別

little小小發表於2022-02-12
H5架構
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這些資原始檔，相比原生網路載入速度慢。

相關文章