国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

現(xiàn)有3類主流APP，分別為：Web App、Hybrid App（混合模式移動(dòng)應(yīng)用，Hybrid有“混合的”意思）、 Native App（原生app，后面都用“原生app”來(lái)描述）。Web App和原生app有很多大牛們都做過(guò)比較詳細(xì)的比較以及優(yōu)劣勢(shì)分析，我主要對(duì)Hybrid App來(lái)簡(jiǎn)要分析下，談?wù)凥ybrid App里原生頁(yè)面和H5頁(yè)面的比較和分析。

Hybrid APP指的是半原生半Web的混合類App。需要下載安裝，看上去類似Native App，但只有很少的UI Web View，訪問(wèn)的內(nèi)容是 Web 。

現(xiàn)在不少app已經(jīng)使用H5頁(yè)面來(lái)代替原生頁(yè)面（即Hybrid APP），兩種方式具有不同的用戶體驗(yàn)。剛好最近遇到公司想用H5頁(yè)面來(lái)代替原生頁(yè)面，了解了下，并把所有的問(wèn)題以及知識(shí)點(diǎn)都記錄下來(lái)。

原生頁(yè)面和H5頁(yè)面的優(yōu)劣勢(shì)分析

其各自的優(yōu)劣勢(shì)也有很多前輩都已經(jīng)總結(jié)過(guò)了，我稍微記錄并歸納下（本文中的相對(duì)/相比較都是針對(duì)這兩種方式而言的）。

原生頁(yè)面

優(yōu)勢(shì)：

（1）運(yùn)行速度比較快

（2）能使用設(shè)備的底層功能，如攝像頭、方向傳感器、重力傳感器、撥號(hào)、GPS、語(yǔ)音、短信、藍(lán)牙等

（3）在界面設(shè)計(jì)、功能模塊、操作邏輯等層面相較web更易做到App的便捷性和舒適性，功能更加強(qiáng)大

（4）節(jié)省流量

劣勢(shì)：

（1）不同的操作系統(tǒng)（如Android和iOS）需要獨(dú)立的進(jìn)行開(kāi)發(fā)，使用其各自的開(kāi)發(fā)包、開(kāi)發(fā)工具和控件

（2）每次有更新，都需要重新打包一次發(fā)布到應(yīng)用平臺(tái)上，且每次要向各個(gè)應(yīng)用商店進(jìn)行提交審核。之后用戶需要手動(dòng)進(jìn)行點(diǎn)擊更新安裝（安裝成本較高）

（3）開(kāi)發(fā)成本比較高，尤其需要適配各種機(jī)型時(shí)（如Android應(yīng)用，需要適配各種Android手機(jī)）

H5頁(yè)面

優(yōu)勢(shì)：

（1）由于是運(yùn)行在瀏覽器上，所以只需要開(kāi)發(fā)一次便可以在不同的操作系統(tǒng)上顯示

（2）迭代版本時(shí)，不需要打包便可以發(fā)布（實(shí)時(shí)更新、快速迭代），與云端實(shí)現(xiàn)實(shí)時(shí)數(shù)據(jù)交互

（3）開(kāi)發(fā)成本相對(duì)較低，對(duì)瀏覽器的適配較簡(jiǎn)單，且發(fā)布門檻相對(duì)較低

劣勢(shì)：

（1）每次打開(kāi)頁(yè)面，都得重新加載，獲取數(shù)據(jù)…

（2）過(guò)于依賴網(wǎng)絡(luò)，速度無(wú)法保證。特別在弱網(wǎng)環(huán)境下，不僅耗費(fèi)流量而且加載緩慢，就算是WiFi情況下也不容樂(lè)觀

（3）只能使用有限的設(shè)備底層功能（無(wú)法使用攝像頭、方向傳感器、重力傳感器、撥號(hào)、GPS、語(yǔ)音、短信、藍(lán)牙等功能）

（4）仍處于發(fā)展階段，部分功能無(wú)法在基于現(xiàn)有技術(shù)的瀏覽器基礎(chǔ)上實(shí)現(xiàn)，且無(wú)法全面的顯示最完美的用戶體驗(yàn)，只能用現(xiàn)有技術(shù)去彌去找最佳解決方案

如何區(qū)分Hybrid APP中的原生頁(yè)面和H5頁(yè)面

一直在想一個(gè)問(wèn)題，原生頁(yè)面和H5頁(yè)面到底是憑啥區(qū)分的？看了網(wǎng)上很多大牛是從頁(yè)面的設(shè)計(jì)上來(lái)區(qū)分的。如：（1）頂部顯示網(wǎng)頁(yè)鏈接；（2）有加載的進(jìn)度條；（3）沒(méi)有底部tab導(dǎo)航欄；（4）頂部顯示兩個(gè)導(dǎo)航條；（5）有懸浮圓圈/標(biāo)識(shí)；等可以區(qū)別出H5頁(yè)面的幾種方式。然而現(xiàn)在越來(lái)越多的應(yīng)用開(kāi)始弱化這些表象。【Hybrid App里面一般（1）、（2）、（4）點(diǎn)已經(jīng)被弱化，除了微信（等..），用的還是加載進(jìn)度條（微信的加載進(jìn)度條簡(jiǎn)直要逼瘋我的節(jié)奏，特別是網(wǎng)速特別慢的情況下，就眼睜睜看著他到不了盡頭）】

附上微信的進(jìn)度條….（已醉）

下面，以淘寶為例，給大家看看…真的是怎么都識(shí)別不出來(lái)?。。?/p>

由上圖得知，是否有懸浮圓圈/標(biāo)識(shí)無(wú)法區(qū)別出H5頁(yè)面

由上圖得知，是否有底部tab導(dǎo)航欄也無(wú)法區(qū)別出H5頁(yè)面。

問(wèn)了公司的程序員，結(jié)果還是一頭霧水，只有灰溜溜的去尋求度娘的幫助，果然找到了。

設(shè)置-開(kāi)發(fā)者選項(xiàng)-顯示布局邊界

H5中使用了webview控件，其作為一個(gè)控件，只有一個(gè)邊界框，所以通過(guò)這一點(diǎn)，就比較容易區(qū)分出一個(gè)界面是webview實(shí)現(xiàn)的還是原生布局控件實(shí)現(xiàn)的，當(dāng)然也不排除用一堆webview來(lái)拼成一個(gè)界面的實(shí)現(xiàn)方法。

如下圖是一個(gè)原生與webview混排的界面，紅色線框是各控件的繪制邊界，中間那一大塊布局豐富的界面沒(méi)有顯示出很多邊界紅色，就是H5實(shí)現(xiàn)的。

原生頁(yè)面還是H5頁(yè)面？

對(duì)這兩種開(kāi)發(fā)模式分別進(jìn)行比較，分別得出幾種各自適用的場(chǎng)景

選擇原生頁(yè)面的幾點(diǎn)理由：

1.使用定位功能

如果需要用到GPS定位功能，以前只能使用原生的API來(lái)查看用戶的位置信息，但現(xiàn)在大多數(shù)的主流瀏覽器上都嵌入了W3C Geolocation API。安裝了WebKit的設(shè)備或是配置了Opera或Mozilla瀏覽器的設(shè)備，均可以獲取用戶的位置信息。這在技術(shù)上已經(jīng)沒(méi)有太大的困難，然而卻受到隱私保護(hù)條例的限制。加入定位功能，意味著給網(wǎng)站引入了一些敏感信息，可能會(huì)導(dǎo)致嚴(yán)重的后果。而原生app的位置信息必須經(jīng)過(guò)用戶授權(quán)，排除了隱患。

2.使用攝像頭

如果需要用到攝像頭功能，原生開(kāi)發(fā)者能夠簡(jiǎn)化拍照的過(guò)程，直接在客戶端對(duì)照片做一些處理，只有需要的時(shí)候才上傳服務(wù)器。W3C正在開(kāi)發(fā)一個(gè)訪問(wèn)攝像頭的API，但現(xiàn)在還沒(méi)有將這部分工作正式整合到瀏覽器中。

3.使用感應(yīng)器（方向傳感器、重力傳感器等）

4.訪問(wèn)文件系統(tǒng)

訪問(wèn)文件系統(tǒng)常會(huì)涉及到安全和用戶隱私保護(hù)的問(wèn)題。惡意應(yīng)用程序可能會(huì)修改或刪除你的數(shù)據(jù)。移動(dòng)設(shè)備越來(lái)越私人化，在移動(dòng)設(shè)備上保存了大量用戶的個(gè)人信息、朋友信息及商業(yè)信息，保存在本地的數(shù)據(jù)更加安全且可以為用戶提供更加有針對(duì)性的服務(wù)，這要求開(kāi)發(fā)者須獲得用戶的授權(quán)后才能訪問(wèn)用戶的私人數(shù)據(jù)。則原生app更容易做到這點(diǎn)

訪問(wèn)文件系統(tǒng)時(shí)至關(guān)重要的一點(diǎn)就是在沒(méi)有獲得用戶授權(quán)的情況下，不要訪問(wèn)任何用戶的私人數(shù)據(jù)。而這一點(diǎn)，往往被大多數(shù)應(yīng)用忽略了。W3C正在為移動(dòng)開(kāi)發(fā)商開(kāi)發(fā)相關(guān)的標(biāo)準(zhǔn)API，但目前該工作尚未完成。

5.提供離線服務(wù)

使用原生頁(yè)面可以將數(shù)據(jù)保存在本地并進(jìn)行讀取，可以實(shí)現(xiàn)離線服務(wù)，在無(wú)網(wǎng)或弱網(wǎng)情況下，更深得用戶喜愛(ài)。

選擇H5頁(yè)面的幾點(diǎn)理由：

1.功能開(kāi)發(fā)不完善，試運(yùn)營(yíng)階段（試錯(cuò)成本低），快速收集用戶反饋信息及時(shí)更新

2.應(yīng)用須適應(yīng)多個(gè)操作系統(tǒng)，且資源/預(yù)算有限制

3.技術(shù)強(qiáng)，能夠極力解決由網(wǎng)速引起的頁(yè)面不順暢問(wèn)題

4.不滿足原生app條件之一，且能做到第三點(diǎn)的完善，并隨著越來(lái)越豐富的功能接口可供開(kāi)發(fā)者調(diào)用，web app比原生app更合適

5.非核心需求，在功能調(diào)整或內(nèi)容的運(yùn)營(yíng)上很靈活

6.階段性的營(yíng)銷活動(dòng)，希望被分享出去

總結(jié)

我覺(jué)得混搭使用這兩種開(kāi)發(fā)模式是最符合當(dāng)下web技術(shù)發(fā)展以及app的發(fā)展背景的，像淘寶就把原生頁(yè)面和H5頁(yè)面融合的天衣無(wú)縫，也盡可能的用技術(shù)解決了H5頁(yè)面的劣勢(shì)問(wèn)題。當(dāng)然，各企業(yè)需要根據(jù)自身的條件以及戰(zhàn)略來(lái)選擇適合自己的開(kāi)發(fā)模式，合理配置資源。

對(duì)于Hybrid APP，對(duì)H5頁(yè)面有幾個(gè)注意點(diǎn)

H5頁(yè)面的幾個(gè)動(dòng)效設(shè)計(jì)優(yōu)化點(diǎn)：

1.盡量使用比較簡(jiǎn)單的動(dòng)效，不要求做到酷炫，但求做到好用就行

2.頂部標(biāo)題欄盡量使用原生的（這樣在網(wǎng)速渣，內(nèi)容沒(méi)刷出來(lái)的情況下，也可以快速返回，不流量）

3.不要使用瀏覽器進(jìn)度條加載方式，用下拉刷新的方式（和原生保持一致，不讓用戶有瀏覽網(wǎng)頁(yè)的感覺(jué)，而是在使用app）

4.少用手勢(shì)，以防與瀏覽器手勢(shì)沖突

H5頁(yè)面的幾個(gè)技術(shù)優(yōu)化點(diǎn)：

1.優(yōu)先顯示框架，內(nèi)容可以緩慢加載顯示出來(lái)

2.模塊化你的 H5 頁(yè)面/應(yīng)用，引入模塊加載器（可選）

模塊加載器如SeaJS、requireJS、kissy loader 等。使用模塊化的方式來(lái)開(kāi)發(fā)你的應(yīng)用，不僅僅將有利于后期的代碼維護(hù)，在 Hrbrid 的架構(gòu)中，還將會(huì)有利于性能的提升。

疑問(wèn)：模塊開(kāi)發(fā)粒度越細(xì)化，加載時(shí)請(qǐng)求的JS、CSS等靜態(tài)資源的數(shù)量越多，頁(yè)面的性能不會(huì)越差嗎？

答：如果你僅僅是使用了模塊加載器并異步加載各個(gè)模塊，那么加載的性能一定很差，因?yàn)檎?qǐng)求的數(shù)量太多。當(dāng)然你肯定會(huì)想到在發(fā)布前打包合并靜態(tài)資源，那么對(duì)這樣的解決方案我只能給到 50 分，因?yàn)楸淮虬喜⒌奈募兄灰幸粋€(gè)子文件發(fā)生變化，那么整個(gè)文件（JS或CSS）都要被重新下載，對(duì)移動(dòng)帶寬而言還是個(gè)負(fù)擔(dān)。

怎么破？請(qǐng)看第3點(diǎn)—

3.啟用 AppCache ，并引入增量更新機(jī)制

做過(guò) WebApp 的同學(xué)應(yīng)該會(huì)了解mainfest文件，Html5提供的應(yīng)用緩存功能，開(kāi)發(fā)者只要把需被緩存的靜態(tài)資源文件名羅列在這個(gè)列表中即可保證二次訪問(wèn)時(shí)無(wú)需重新加載。看起來(lái)不錯(cuò)！這樣前面說(shuō)的模塊化開(kāi)發(fā)造成的請(qǐng)求數(shù)量過(guò)多的問(wèn)題，至少在二次訪問(wèn)時(shí)不會(huì)再發(fā)生了。嗯，這樣的方案可以給到 70 分吧。其實(shí)，Html5 提供的 mainfest 緩存機(jī)制有個(gè)比較大的問(wèn)題（兼容性就先不提了）：如果 mainfest 列表中的一個(gè)資源文件需要更新，那么整個(gè) mainfest 中的其它文件也都需要被重新下載一遍。 也即是說(shuō)二次訪問(wèn)沒(méi)有問(wèn)題了，但是 Html5 應(yīng)用更新時(shí)還是會(huì)出現(xiàn)全量下載的問(wèn)題。

別忘了，我們是 Hybrid App，還可以充分利用 原生層的強(qiáng)大能力，所以拋棄mainfest吧，讓原生來(lái)幫助 Html5 應(yīng)用緩存靜態(tài)資源文件。總體思路是：

（1）、Html5 應(yīng)用首次啟動(dòng)時(shí)，調(diào)用 原生提供的加載資源文件專用的 Device API 來(lái)請(qǐng)求所需的資源文件，由原生層發(fā)出真正的資源請(qǐng)求，并將請(qǐng)求結(jié)果緩存在手機(jī)的SD卡上。當(dāng)然，這里完全可以優(yōu)化為一次 zip 包請(qǐng)求，因?yàn)樵軌蛱峁?qiáng)大的解壓能力。

（2）、H5 應(yīng)用再次啟動(dòng)時(shí)，所有的靜態(tài)資源都是通過(guò) Device API 讀取本地緩存，無(wú)需再走網(wǎng)絡(luò)。

（3）、H5 應(yīng)用出現(xiàn)靜態(tài)資源更新時(shí)，在應(yīng)用啟動(dòng)時(shí)首先通過(guò) Device API 加載需要更新的文件，并更新本地緩存，其它未變更文件繼續(xù)走緩存。

流程看起來(lái)挺順，其中有幾個(gè)關(guān)鍵問(wèn)題需要解決：

（1）、如何通過(guò) Device API 加載資源文件？

這里使用模塊加載器的優(yōu)勢(shì)就體現(xiàn)出來(lái)了，只需要在加載器中做點(diǎn)小修改，不直接走Http請(qǐng)求了，而直接調(diào)用原生提供的文件加載 DeviceAPI 即可。?如果你沒(méi)有模塊加載器，就需要寫統(tǒng)一的函數(shù)來(lái)做加載資源的功能了。

其實(shí)原生也提供了攔截機(jī)制，能夠攔截到 H5 應(yīng)用發(fā)出的所有 Http 請(qǐng)求并進(jìn)行自定義處理，可惜這樣好的功能在 Andorid 4.0 以下版本不支持。?故現(xiàn)階段還是主動(dòng)調(diào)用 Device API 更靠譜。

（2）、何時(shí)需要進(jìn)行靜態(tài)資源的更新？

每次靜態(tài)資源發(fā)布都會(huì)產(chǎn)生一個(gè)唯一的發(fā)布時(shí)間戳（或是所有資源內(nèi)容的MD5編碼），H5應(yīng)用啟動(dòng)后，可將當(dāng)前時(shí)間戳保存下來(lái)，等應(yīng)用下次啟動(dòng)時(shí)，請(qǐng)求最新的發(fā)布時(shí)間戳并與本地時(shí)間戳進(jìn)行對(duì)比，若不同，則首先進(jìn)行靜態(tài)資源的增量更新。

（3）、如何判斷哪些是需要被增量更新替代的靜態(tài)資源文件？

這個(gè)問(wèn)題的回答會(huì)比較復(fù)雜些，核心思路是通過(guò)對(duì)前后兩次資源文件（js、css、image等）發(fā)布的內(nèi)容對(duì)比完成：

如此，H5 應(yīng)用借助原生應(yīng)用的能力完成了資源的緩存與增量更新，可以保證 H5 應(yīng)用在啟動(dòng)與更新時(shí)的加載速度。當(dāng)然也有方案借助 HTML5 的 localstorage 來(lái)替代 Native 的緩存更新策略，但是可能會(huì)受到兩處限制：

1）、若 Hybrid App 比較復(fù)雜，涉及多個(gè)子域甚至主域間的靜態(tài)資源共享，則 localstorage 的方案首先要解決跨域訪問(wèn)的問(wèn)題，并且在每個(gè)子域存儲(chǔ)空間上存在上限，是 5M。

2）、原生能夠支持更新包的 zip 打包下載，一次請(qǐng)求，然后解壓并更新本地緩存。而 localstorage 無(wú)法實(shí)現(xiàn)。

若應(yīng)用中以上兩點(diǎn)不是問(wèn)題，則使用 localstorage 緩存的策略完全 OK。

4.啟用 spdy 協(xié)議

spdy協(xié)議在移動(dòng)開(kāi)發(fā)上大有可為，它是HTTP協(xié)議的增強(qiáng)版本，能夠通過(guò)一次TCP鏈接同時(shí)請(qǐng)求到多個(gè)資源文件，請(qǐng)求速度上的提升那是自然的了，非常強(qiáng)大！chrome 等 webkit 內(nèi)核瀏覽器都已經(jīng)支持。 可惜若是借助瀏覽器自身使用 spdy 協(xié)議則要求靜態(tài)資源服務(wù)（js、css、image）必須是 https 的域名服務(wù)，且后臺(tái)server能支持spdy協(xié)議。相信大多數(shù)靜態(tài)服務(wù)器都還是http 服務(wù)，是無(wú)法通過(guò)瀏覽器來(lái)直接支持的。

還是那句話，因?yàn)槲覀兪?hybrid 應(yīng)用，可以發(fā)揮native的優(yōu)勢(shì)！ native 層完全可以實(shí)現(xiàn)基于 spdy 協(xié)議請(qǐng)求的 device API，供 H5 應(yīng)用（JS）來(lái)調(diào)用。這樣就不需要 https 域名服務(wù)器也能使用 spdy了。

如果你的 Hybrid 應(yīng)用已經(jīng)支持了 spdy 協(xié)議，那么你可以考慮不再需要把增量更新的資源文件打包成 zip 下載了，直接 spdy 協(xié)議并行下載即可！

SPDY 與 HTTP 協(xié)議速度對(duì)比：

參考Hybrid 架構(gòu)下的 H5 應(yīng)用加速方案

最后提供一個(gè)工具：百度Site App（簡(jiǎn)而言之就是將網(wǎng)站變成webapp）

擴(kuò)展鏈接：

再次對(duì)比：原生APP和Web APP的區(qū)別

web app與app的區(qū)別，即html5與app的區(qū)別

Web APP與Native APP原生開(kāi)發(fā)模式的區(qū)別

超贊！聊聊WEB APP、HYBRID APP與NATIVE APP的設(shè)計(jì)差異

Hybrid 架構(gòu)下的 H5 應(yīng)用加速方案

作者：小圣

來(lái)源：http://www.jianshu.com/p/00ff5664e000