APP中的 H5和原生頁面如何分辨、什麼時候使用

1、APP內嵌H5和原生的區別

一、原生的頁面運行速度快，比較流暢。
H5頁面相對原生的運行性能低，特別是一些動畫效果有明顯卡頓。

二、H5頁面的不少交互都沒有原生的好，好比彈層、輸入時候的頁面滑動 等。H5的效果相對比較low，沒有原生的好看，也沒有原生默認的動畫等效果。

三、原生APP修改頁面要從新發布，等待審覈（如今iOS的審覈速度已經提升到1天到2天）。
H5頁面的修改 能夠隨時上線，不用等待審覈。

四、H5跨平臺，iOS和android須要各自開發。相對原生，H5開發成本低。

五、原生APP能很好的使用設備底層功能，如攝像頭、方向傳感器、重力傳感器等。H5有所限制。
好比android裏的H5對攝像頭和方向傳感器就須要再多作一些處理。再好比你不想用系統默認的手機相冊樣式，就要用原生來開發了。

六、H5過分依賴於網絡，網絡很差的時候卡到不行，而且剛打開看到的都是一個空白頁面。
默認的H5頁面每次打開都會從新請求頁面（能夠作緩存，不過基本不多有作的）。
H5比原生更費流量，H5除了加載html還要加載js、css這些資源文件，相比原生網絡加載速度慢。

2、APP原生和H5頁面如何分辨

一、android手機能夠修改設置：  設置—》開發者選項—》顯示佈局邊界（Show layout bounds） 。
這樣就能看到控件的佈局了，若是包含圖片、文字等信息的一整塊區域只有一個邊框，應該就是H5實現的。
iOS在真機上沒有這個選項。通常開發人員能夠 用mac上的Reveal軟件 來查看APP的佈局，或者用網絡抓包來分析是否爲H5頁面。

二、新打開頁面，若是頁面是個空頁面，基本就是H5頁面。原生的頁面通常都會有一些控件提早放在頁面中。
若是空頁面 上拉還有大塊黑色的背景，就是H5頁面，不過如今不少開發人員已經作了優化，不會顯示黑色的大色斑。

三、關閉網絡後，若是是整個的空白頁，這個基本就是H5頁面。如何頁面還有控件基本就是原生的。

四、下拉刷新的時候H5會有一個明顯的刷新現象，好比閃現、導航欄標題消失等。
原生的下拉刷新沒有明顯現象，很平滑。

五、若是開發人員沒有禁用掉WebView的長按手勢，會彈出一個系統默認的快捷菜單：拷貝、查詢、添加、分享。這個頁面就是H5頁面。

六、若是打開一個頁面頂部有個進度條，就是H5頁面。固然不少H5頁面也沒有加進度條。

七、頁面的底部導航  在上拉的時候 若是跟着一塊兒滾動，就是H5頁面。

八、H5彈框、頁面跳轉等和原生的效果都不同，能夠仔細看下。

九、H5頁面點擊 輸入框，彈出的鍵盤上面通常都有「完成」按鈕，原生的沒有。

3、APP原生和H5何時使用

一、核心需求 要用原生，好比淘寶裏的產品詳情頁、訂單頁、支付頁等。
非核心需求 能夠考慮用H5，遇到功能調整，能夠快速發佈。好比淘寶首頁的特點好貨、熱門市場等欄目 須要常常變更，用H5來作比較靈活。

二、階段性的營銷活動頁面，特別是功能、佈局等常常須要修改的需求，能夠用H5來作。好比節日的有獎活動頁面，常常須要調整，用H5作會更靈活。

4、如今經常使用的方案

一、有四種方式來作APP：Web App（純Web頁面）、Hybrid App（web和原生混合開發）、 Native App（原生APP）、Weex和React Native(用相似js、html來寫原生效果的頁面)。 二、如今沒有所有用H5來作APP的，交互體驗太差。 三、Hybrid App 前幾年火過，其努力去打造相似於Native App 的體驗，但仍受限於技術，網速，等等不少因素。並非很完美。 四、如今不少大公司在嘗試用Weex和React Native或者DeviceOne 來實現一些常常改動的頁面或者活動營銷頁面，能夠隨時發佈，交互效果還和原生的同樣。其中Weex站在了React Native這個巨人的肩膀上，借鑑並作了更好的嘗試，我我的更建議用Weex。