H5頁面與原生頁面的差別

一、定義

1.H5，即是html5，超文本标記語言，用于描述網頁内容結構的語言，網頁程式設計中由它有負責描述頁面資料和資訊

2.JS，即是JavaScript，廣泛用于web應用開發中的腳本語言，負責響應使用者的操作，為網頁添加動态功能

3.Native App，即傳統的原生APP開發模式，Android基于Java語言，底層調用Google的 API；iOS基于Objective-C或者Swift語言，底層調用App官方提供的API

4.Hybrid App，即原生和web的混合開發模式，由原生提供統一的API給js調用，實作跨平台的效果

簡單來說，原生是Native App ，H5是Web App。

二、鑒别方法

1.看斷網時頁面顯示情況

斷網時可正常顯示頁面即原生頁面，顯示404或報錯則為H5頁面。

2.看布局邊界（僅針對安卓手機适用）

連續點選手機版本号，打開開發者選項中的顯示布局邊界。在頁面元素很多的情況下，布局是一整塊的是H5頁面，布局密密麻麻的是原生控件。即頁面有布局的是原生，否則為H5頁面。

3.看複制文章的提示

比如是文章資訊頁面可以長按頁面試試，如果出現文字選擇、粘貼功能的是H5頁面，否則是native原生頁面。

注意：有些原生APP開放了複制粘貼功能或者關閉了。而H5的css屏蔽了複制選擇功能等等情況。需要通過對目标測試APP進行對比才可知。

4.看加載時是否有載入線條

如果在打開新頁面導航欄下面有一條加載的線的話，這個頁面就是H5頁面，如果沒有就是原生的。

5.看app頂部導航欄是否有關閉操作

如果APP頂部導航欄當中出現了關閉按鈕或者有關閉的圖示，則是H5頁面，原生的不會出現。

6.看頁面重新整理是否明顯（前提是要有下拉重新整理功能）

如果界面沒有明顯重新整理現象的是原生的，如果有明顯重新整理現象的是H5頁面。

7.看下拉是否有網址顯示

下拉頁面時顯示網址提供方的一定是H5。

三、優缺點

1.H5

（1）優點：支援跨平台，安卓、ios不需要單獨開發，隻需要開發一套即可；使用者無需下載下傳,打開網址即可通路；開發簡單，開發成本低，入門門檻低。

（2）缺點： 每次打開頁面，都需重新加載擷取資料；過分依賴網絡，通路速度無法保證。

2.原生

（1）優點：直接依托于作業系統，互動性最強，性能最好。

（2）缺點 :開發成本高,無法跨平台；不同平台（Android和iOS）需要各自獨立開發；開發人員入門門檻較高；app釋出稽核流程麻煩，維護成本高。

四、測試點

頁面測試點可參考：https://www.cnblogs.com/suntingme/p/5396085.html