總被產(chǎn)品、運(yùn)營(yíng)問(wèn)這個(gè)頁(yè)面是原生還是H5，所以寫(xiě)了這篇文章給他們看，同時(shí)更新到簡(jiǎn)書(shū)上。

一、APP內(nèi)嵌H5和原生的區(qū)別

1、原生的頁(yè)面運(yùn)行速度快，比較流暢。
H5頁(yè)面相對(duì)原生的運(yùn)行性能低，特別是一些動(dòng)畫(huà)效果有明顯卡頓。

2、H5頁(yè)面的很多交互都沒(méi)有原生的好，比如彈層、輸入時(shí)候的頁(yè)面滑動(dòng) 等。H5的效果相對(duì)比較low，沒(méi)有原生的好看，也沒(méi)有原生默認(rèn)的動(dòng)畫(huà)等效果。

3、原生APP修改頁(yè)面要重新發(fā)布，等待審核（現(xiàn)在iOS的審核速度已經(jīng)提高到1天到2天）。
H5頁(yè)面的修改 可以隨時(shí)上線，不用等待審核。

4、H5跨平臺(tái)，iOS和android需要各自開(kāi)發(fā)。相對(duì)原生，H5開(kāi)發(fā)成本低。

5、原生APP能很好的使用設(shè)備底層功能，如攝像頭、方向傳感器、重力傳感器等。H5有所限制。
比如android里的H5對(duì)攝像頭和方向傳感器就需要再多做一些處理。再比如你不想用系統(tǒng)默認(rèn)的手機(jī)相冊(cè)樣式，就要用原生來(lái)開(kāi)發(fā)了。

6、H5過(guò)度依賴于網(wǎng)絡(luò)，網(wǎng)絡(luò)不好的時(shí)候卡到不行，并且剛打開(kāi)看到的都是一個(gè)空白頁(yè)面。
默認(rèn)的H5頁(yè)面每次打開(kāi)都會(huì)重新請(qǐng)求頁(yè)面（可以做緩存，不過(guò)基本很少有做的）。
H5比原生更費(fèi)流量，H5除了加載html還要加載js、css這些資源文件，相比原生網(wǎng)絡(luò)加載速度慢。

二、APP原生和H5頁(yè)面如何分辨

1、android手機(jī)可以修改設(shè)置： 設(shè)置—》開(kāi)發(fā)者選項(xiàng)—》顯示布局邊界（Show layout bounds） 。
這樣就能看到控件的布局了，如果包含圖片、文字等信息的一整塊區(qū)域只有一個(gè)邊框，應(yīng)該就是H5實(shí)現(xiàn)的。
iOS在真機(jī)上沒(méi)有這個(gè)選項(xiàng)。一般開(kāi)發(fā)人員可以 用mac上的Reveal軟件 來(lái)查看APP的布局，或者用網(wǎng)絡(luò)抓包來(lái)分析是否為H5頁(yè)面。

2、新打開(kāi)頁(yè)面，如果頁(yè)面是個(gè)空頁(yè)面，基本就是H5頁(yè)面。原生的頁(yè)面一般都會(huì)有一些控件提前放在頁(yè)面中。
如果空頁(yè)面 上拉還有大塊黑色的背景，就是H5頁(yè)面，不過(guò)現(xiàn)在很多開(kāi)發(fā)人員已經(jīng)做了優(yōu)化，不會(huì)顯示黑色的大色斑。

3、關(guān)閉網(wǎng)絡(luò)后，如果是整個(gè)的空白頁(yè)，這個(gè)基本就是H5頁(yè)面。如何頁(yè)面還有控件基本就是原生的。

4、下拉刷新的時(shí)候H5會(huì)有一個(gè)明顯的刷新現(xiàn)象，比如閃現(xiàn)、導(dǎo)航欄標(biāo)題消失等。
原生的下拉刷新沒(méi)有明顯現(xiàn)象，很平滑。

5、如果開(kāi)發(fā)人員沒(méi)有禁用掉WebView的長(zhǎng)按手勢(shì)，會(huì)彈出一個(gè)系統(tǒng)默認(rèn)的快捷菜單：拷貝、查詢、添加、分享。這個(gè)頁(yè)面就是H5頁(yè)面。

6、如果打開(kāi)一個(gè)頁(yè)面頂部有個(gè)進(jìn)度條，就是H5頁(yè)面。當(dāng)然很多H5頁(yè)面也沒(méi)有加進(jìn)度條。

7、頁(yè)面的底部導(dǎo)航 在上拉的時(shí)候 如果跟著一起滾動(dòng)，就是H5頁(yè)面。

8、H5彈框、頁(yè)面跳轉(zhuǎn)等和原生的效果都不一樣，可以仔細(xì)看下。

9、H5頁(yè)面點(diǎn)擊 輸入框，彈出的鍵盤(pán)上面一般都有“完成”按鈕，原生的沒(méi)有。

三、APP原生和H5什么時(shí)候使用

1、核心需求 要用原生，比如淘寶里的產(chǎn)品詳情頁(yè)、訂單頁(yè)、支付頁(yè)等。
非核心需求 可以考慮用H5，遇到功能調(diào)整，可以快速發(fā)布。比如淘寶首頁(yè)的特色好貨、熱門市場(chǎng)等欄目 需要經(jīng)常變動(dòng)，用H5來(lái)做比較靈活。

2、階段性的營(yíng)銷活動(dòng)頁(yè)面，特別是功能、布局等經(jīng)常需要修改的需求，可以用H5來(lái)做。比如節(jié)日的有獎(jiǎng)活動(dòng)頁(yè)面，經(jīng)常需要調(diào)整，用H5做會(huì)更靈活。

四、現(xiàn)在常用的方案

1、有四種方式來(lái)做APP：Web App（純Web頁(yè)面）、Hybrid App（web和原生混合開(kāi)發(fā)）、 Native App（原生APP）、Weex和React Native(用類似js、html來(lái)寫(xiě)原生效果的頁(yè)面)。
2、現(xiàn)在沒(méi)有全部用H5來(lái)做APP的，交互體驗(yàn)太差。
3、Hybrid App 前幾年火過(guò)，其努力去打造類似于Native App 的體驗(yàn)，但仍受限于技術(shù)，網(wǎng)速，等等很多因素。并不是很完美。
4、現(xiàn)在很多大公司在嘗試用Weex和React Native或者DeviceOne 來(lái)實(shí)現(xiàn)一些經(jīng)常改動(dòng)的頁(yè)面或者活動(dòng)營(yíng)銷頁(yè)面，可以隨時(shí)發(fā)布，交互效果還和原生的一樣。其中Weex站在了React Native這個(gè)巨人的肩膀上，借鑒并做了更好的嘗試，我個(gè)人更建議用Weex。