手機(jī)現(xiàn)在是互聯(lián)網(wǎng)的最大入口。根據(jù)《中國(guó)互聯(lián)網(wǎng)報(bào)告》^[1]，手機(jī)網(wǎng)民已經(jīng)超過(guò)8億，人均每天上網(wǎng)三個(gè)多小時(shí)。

毫不奇怪，手機(jī)應(yīng)用軟件（mobile application，簡(jiǎn)稱(chēng) mobile App）的開(kāi)發(fā)工程師供不應(yīng)求，一直是 IT 招聘的熱門(mén)。

如果你開(kāi)始學(xué)習(xí)手機(jī) App 開(kāi)發(fā)，就一定會(huì)聽(tīng)到 H5 這個(gè)詞。它是目前的主流開(kāi)發(fā)技術(shù)之一，容易上手，開(kāi)發(fā)周期短、成本低、兼容傳統(tǒng) Web 開(kāi)發(fā)。但是，很少有文章詳細(xì)介紹，H5 到底是什么技術(shù)，有什么原理，跟其他技術(shù)的差異在哪里。

本文就是 H5 的入門(mén)教程，今天是第一篇，介紹基本概念。內(nèi)容盡量通俗，不過(guò)本來(lái)也沒(méi)有太復(fù)雜的東西。我希望這篇文章可以幫助新手入門(mén)，也可以供熟練開(kāi)發(fā)者回顧和整理知識(shí)點(diǎn)。

感謝國(guó)內(nèi)最大的在線(xiàn)教育平臺(tái)之一“騰訊課堂”^[2]贊助這個(gè)系列教程。他們現(xiàn)在啟動(dòng)了“騰訊課堂101計(jì)劃”^[3]，推廣優(yōu)質(zhì)課程資源。希望提高前端技術(shù)水平的朋友，可以留意一下本文結(jié)尾的課程“一元錢(qián)”課程信息。

一、H5 的含義

表面上看，手機(jī) App 都是同樣的東西，就是手機(jī)上的應(yīng)用程序，點(diǎn)擊圖標(biāo)就能運(yùn)行，但是它們的底層技術(shù)不一樣。按照開(kāi)發(fā)技術(shù)，App 可以分成三大類(lèi)。

?原生應(yīng)用（native application，簡(jiǎn)稱(chēng) native App）?Web 應(yīng)用（web application，簡(jiǎn)稱(chēng) Web App）?混合應(yīng)用（hybrid application，簡(jiǎn)稱(chēng) hybrid App）

這三類(lèi) App 的技術(shù)模型都不一樣，各有優(yōu)缺點(diǎn)。企業(yè)一般會(huì)選擇其中一種作為主要技術(shù)棧，構(gòu)建自己的手機(jī) App。

H5 這個(gè)詞，可以理解成就是混合 App 模型，只不過(guò)它特指混合 App 的前端部分。因?yàn)榛旌?App 的前端就是 HTML5 網(wǎng)頁(yè)，所以簡(jiǎn)稱(chēng) H5。這個(gè)詞是國(guó)內(nèi)獨(dú)有的，基本上都是前端程序員在用，國(guó)外不用這個(gè)詞，就直接叫混合 App。

真正理解 H5 開(kāi)發(fā)，需要先搞清楚什么是原生 App、什么是 Web App，因?yàn)榛旌?App 是在它們的基礎(chǔ)上誕生的。

二、原生應(yīng)用

2.1 概念

原生 App 是專(zhuān)門(mén)為特定手機(jī)平臺(tái)開(kāi)發(fā)的應(yīng)用程序，無(wú)法在其他平臺(tái)運(yùn)行。一個(gè)手機(jī)軟件如果要同時(shí)支持蘋(píng)果手機(jī)和安卓手機(jī)，就需要為它們各寫(xiě)一個(gè)原生 App。

歷史上，原生 App 最早出現(xiàn)，跟智能手機(jī)系統(tǒng)一起誕生。2007年6月 iPhone 誕生，2008年9月安卓誕生，就同時(shí)發(fā)布了自家平臺(tái)的原生 App 開(kāi)發(fā)方法。

原生 App 使用與手機(jī)操作系統(tǒng)相同的語(yǔ)言。iOS 的原生 App 使用 Objective-C 語(yǔ)言或 Swift 語(yǔ)言，安卓使用 Java 語(yǔ)言或 Kotlin 語(yǔ)言。由于跟底層系統(tǒng)的語(yǔ)言和技術(shù)模型一致，所以原生 App 的性能和用戶(hù)體驗(yàn)都很好。

2.2 優(yōu)點(diǎn)

原生 App 的優(yōu)點(diǎn)主要是兩個(gè)：（1）較好的性能和體驗(yàn)；（2）可以使用系統(tǒng)的所有硬件和軟件 API，比如 GPS、攝像頭、麥克風(fēng)、加速計(jì)、通知推送等等，能充分發(fā)揮系統(tǒng)的潛力。

2.3 缺點(diǎn)

原生 App 的缺點(diǎn)主要是成本，每個(gè)手機(jī)平臺(tái)都要建立一個(gè)獨(dú)立的開(kāi)發(fā)團(tuán)隊(duì)，大公司一般都有 iOS 和安卓?jī)蓚€(gè)開(kāi)發(fā)團(tuán)隊(duì)。如果出現(xiàn)第三個(gè)平臺(tái)（以前的 Windows Phone，也許將來(lái)的華為鴻蒙 OS），就要組建第三個(gè)團(tuán)隊(duì)，成本就更高。

第二個(gè)缺點(diǎn)是，原生 App 使用底層操作系統(tǒng)的語(yǔ)言，都是很重的編譯型語(yǔ)言，開(kāi)發(fā)和調(diào)試成本相對(duì)較高，時(shí)間周期長(zhǎng)。

第三個(gè)缺點(diǎn)是，原生 App 必須下載安裝才能使用，只要升級(jí)版本，就必須重新下載安裝。用戶(hù)往往不愿意更新版本，廠(chǎng)商被迫不得不長(zhǎng)期支持很久以前的舊版本。

三、Web 應(yīng)用

3.1 概念

Web App 是使用網(wǎng)頁(yè)做的應(yīng)用程序，必須在瀏覽器中使用。比如，你在瀏覽器中收發(fā)郵件，就是在使用 Web App。

Web App 主要使用網(wǎng)頁(yè)技術(shù)，即 HTML、JavaScript 和 CSS。2008年，w3c 組織發(fā)布了 HTML 第5版，簡(jiǎn)稱(chēng) HTML 5，該版本大大增強(qiáng)了網(wǎng)頁(yè)的功能，使得網(wǎng)頁(yè)可以當(dāng)作應(yīng)用程序使用，而不僅僅是展示文字和圖片，這就是 Web App 的由來(lái)。

3.2 優(yōu)點(diǎn)和缺點(diǎn)

Web App 的優(yōu)點(diǎn)是：（1）不需要下載安裝，打開(kāi)瀏覽器就能使用，而且總是使用最新版本；（2）對(duì)于開(kāi)發(fā)者來(lái)說(shuō)，Web App 寫(xiě)起來(lái)比較快，調(diào)試容易，不需要應(yīng)用商店的批準(zhǔn)就能發(fā)布。

Web App 的主要缺點(diǎn)有兩個(gè)。首先，瀏覽器提供的 API（即 Web API）很有限（目前只有相機(jī)、GPS、電池等少數(shù)幾個(gè)），大部分系統(tǒng)硬件都不能通過(guò)網(wǎng)頁(yè)訪(fǎng)問(wèn)，也無(wú)法直接讀取硬盤(pán)文件，所以 Web App 無(wú)法充分利用平臺(tái)的硬件。

第二個(gè)缺點(diǎn)是，網(wǎng)頁(yè)通過(guò)瀏覽器渲染，性能不如原生 App，不適合做性能要求較高的頁(yè)面。

3.3 Web App 的劣勢(shì)

Web App 需要打開(kāi)瀏覽器才能使用，這意味著，用戶(hù)必須記住如何導(dǎo)航到它，要么直接輸入網(wǎng)址，要么翻找書(shū)簽。這使得進(jìn)入 Web App，遠(yuǎn)不如原生 App 方便。這點(diǎn)很致命，事實(shí)表明，用戶(hù)偏好原生 App。

谷歌曾經(jīng)調(diào)查了原生 App 和 Web App 各一千個(gè)，發(fā)現(xiàn) Web App 可以覆蓋更多的用戶(hù)（1100萬(wàn) vs 400萬(wàn)），但是原生 App 的用戶(hù)使用時(shí)間（188分鐘）遠(yuǎn)超 Web App（9分鐘）。

另一項(xiàng)調(diào)查發(fā)現(xiàn)，用戶(hù)87％的時(shí)間用在原生 App，13％的時(shí)間用在 Web App。由于這個(gè)原因，企業(yè)很少開(kāi)發(fā) Web App，都把原生 App 當(dāng)作首選。

但是，Web App 也不是毫無(wú)競(jìng)爭(zhēng)力。根據(jù)調(diào)查，普通用戶(hù)每月平均使用27個(gè)原生 App，但訪(fǎng)問(wèn)了100多個(gè)手機(jī)網(wǎng)站。這意味著，用戶(hù)的 App 使用時(shí)間都被頭部 App 占據(jù)了，小公司的 App 使用頻率非常低，獲客成本極高，最終變成僵尸 App。因此，小公司開(kāi)發(fā) Web App 更劃算，不僅成本低，而且可以服務(wù)更多的用戶(hù)，以及更好地宣傳自己（可以被搜索引擎收入）。

3.4 PWA

為了推廣 Web App，谷歌公司的 Chrome 瀏覽器團(tuán)隊(duì)做了很多努力。他們認(rèn)為，Web App 足以滿(mǎn)足大多數(shù) App 的需求，但是三大缺陷阻礙它的推廣。

1.不能從手機(jī)的首屏直接進(jìn)入。2.缺乏手機(jī)狀態(tài)欄和鎖屏?xí)r的通知推送能力。3.不支持脫機(jī)訪(fǎng)問(wèn)（即斷網(wǎng)也能使用）。

為了解決這些問(wèn)題，Chrome 團(tuán)隊(duì)開(kāi)發(fā)了新技術(shù)“漸進(jìn)式 Web App”（Progressive Web App，縮寫(xiě) PWA）。它可以把網(wǎng)站緩存在手機(jī)里面，供離線(xiàn)時(shí)使用，還能在手機(jī)首屏生成圖標(biāo)，直接點(diǎn)擊進(jìn)入，并且有通知推送能力，也不帶有瀏覽器的地址欄和狀態(tài)欄，跟原生 App 的使用體驗(yàn)非常接近。

但是，PWA 需要瀏覽器訪(fǎng)問(wèn)一次網(wǎng)站，才能在首屏生成圖標(biāo)，并且目前 iOS 系統(tǒng)的支持還不夠理想，所以還只是一項(xiàng)探索性質(zhì)的技術(shù)，迄今為止缺乏足夠的成功案例。

四、混合應(yīng)用

4.1 概念

混合 App （hybrid App）顧名思義就是原生 App 與 Web App 的結(jié)合。它的殼是原生 App，但是里面放的是網(wǎng)頁(yè)。可以理解成，混合 App 里面隱藏了一個(gè)瀏覽器，用戶(hù)看到的實(shí)際上是這個(gè)隱藏瀏覽器渲染出來(lái)的網(wǎng)頁(yè)。

混合 App 的原生外殼稱(chēng)為“容器”，內(nèi)部隱藏的瀏覽器，通常使用系統(tǒng)提供的網(wǎng)頁(yè)渲染控件（即 WebView 控件），也可以自己內(nèi)置一個(gè)瀏覽器內(nèi)核。結(jié)構(gòu)上，混合 App 從上到下分成三層：HTML5 網(wǎng)頁(yè)層、網(wǎng)頁(yè)引擎層（本質(zhì)上是一個(gè)隔離的瀏覽器實(shí)例）、容器層。

4.2 API Bridge

混合 App 里面的網(wǎng)頁(yè)不同于普通網(wǎng)頁(yè)，可以調(diào)用底層系統(tǒng)所有的 API。奧秘就在于外層容器提供了 API Bridge，充當(dāng)?shù)讓?API 的中介，允許內(nèi)部的網(wǎng)頁(yè)調(diào)用底層。

所謂 API Bridge 就是容器在底層接口和網(wǎng)頁(yè)之間，建立一座橋梁，讓雙方通信。容器一旦接到網(wǎng)頁(yè)的請(qǐng)求，就根據(jù)請(qǐng)求去調(diào)用底層系統(tǒng)的 API，然后再返回結(jié)果給網(wǎng)頁(yè)。API Bridge 往往以 JavaScript 語(yǔ)言提供，方便網(wǎng)頁(yè)調(diào)用，這時(shí)又稱(chēng)為 JSbridge。

不同容器的 API Bridge 是不一樣的。為某個(gè)容器寫(xiě)的網(wǎng)頁(yè)，不能放在另一個(gè)容器使用，也無(wú)法在瀏覽器使用，除非網(wǎng)頁(yè)腳本做了兼容處理。

容器提供的 API Bridge 必須跟著平臺(tái)更新。比如，iOS 發(fā)了新版本，有了新的硬件 API，容器也必須跟著推出新版的 API Bridge。如果容器沒(méi)有跟上，開(kāi)發(fā)者為了使用新的硬件，就只能想辦法自己來(lái)寫(xiě)缺失的 API Bridge。

4.3 優(yōu)點(diǎn)

混合 App 同時(shí)具有原生 App 和 Web App的優(yōu)點(diǎn)，又可以避免它們的一些缺點(diǎn)。具體來(lái)說(shuō)，可以總結(jié)為三點(diǎn)。

（1）跨平臺(tái)

Web 技術(shù)是跨平臺(tái)的，開(kāi)發(fā)者只寫(xiě)一次頁(yè)面，就能支持多個(gè)平臺(tái)。也就是說(shuō)，混合 App 只需要一個(gè)團(tuán)隊(duì)就夠了，開(kāi)發(fā)成本較低。

（2）靈活性

混合 App 的靈活性大，很容易集成多種功能。一方面，混合 App 很容易加載外部的 H5 頁(yè)面，實(shí)現(xiàn) App 的插件結(jié)構(gòu)；另一方面，Web 頁(yè)面可以方便地調(diào)用外部的 Web 服務(wù)。

（3）開(kāi)發(fā)方便

Web 頁(yè)面的調(diào)試和構(gòu)建，遠(yuǎn)比原生控件簡(jiǎn)單省時(shí)。頁(yè)面的更新也容易，只要在服務(wù)器上發(fā)布新版本，觸發(fā)容器內(nèi)更新就可以了。另外，Web 開(kāi)發(fā)人員也比較容易招聘，傳統(tǒng)的前端程序員可以承擔(dān)開(kāi)發(fā)任務(wù)。

4.4 缺點(diǎn)

混合 App 的主要缺點(diǎn)是，由于存在網(wǎng)頁(yè)引擎的中間層，所以性能比較欠缺，不僅不如原生 App，而且由于 WebView 不是全功能瀏覽器，可能比 Web App 都要慢一些。

另一個(gè)缺點(diǎn)是，由于頁(yè)面跨平臺(tái)，就無(wú)法使用只有特定平臺(tái)提供的功能，導(dǎo)致體驗(yàn)不如純的原生 App。舉例來(lái)說(shuō)，早期的時(shí)候，安卓有物理的后退按鈕，iPhone 沒(méi)有，頁(yè)面設(shè)計(jì)不得不考慮這一點(diǎn)。

上圖是 iOS 頁(yè)面。

上面是安卓頁(yè)面，左上角的后退按鈕，跟系統(tǒng)的后退按鈕重復(fù)了。

4.5 小程序

最后，再來(lái)談?wù)勎⑿判〕绦颉?/p>

所謂小程序，可以看作是針對(duì)特定容器的 H5 開(kāi)發(fā)。微信本身是一個(gè)容器，開(kāi)放自己的接口（JSbridge），外部開(kāi)發(fā)者使用規(guī)定的語(yǔ)法，編寫(xiě)頁(yè)面，容器可以動(dòng)態(tài)加載這些頁(yè)面。

小程序?qū)τ谖⑿殴俜降暮锰幨牵瑪U(kuò)展了功能和應(yīng)用場(chǎng)景，吸引外部開(kāi)發(fā)者加入，繁榮了生態(tài)。對(duì)于外部開(kāi)發(fā)者的好處是，有了流量入口，可以直接調(diào)用微信的各種功能（比如支付）。

今天對(duì)于 H5 相關(guān)概念的介紹，就到這里為止，下一篇文章將介紹 H5 相關(guān)開(kāi)發(fā)工具和框架。

（正文完）

騰訊課堂推薦課程《你不知道的 Vue.js 性能優(yōu)化》

當(dāng)今時(shí)代，IT 教育蓬勃發(fā)展，各種課程層出不窮，知識(shí)唾手可得。你可能經(jīng)常領(lǐng)取到海量的前端開(kāi)發(fā)資料包，往往收藏起來(lái)就再也沒(méi)看過(guò)。

Vue.js 就是這種情況，作為前端的主流框架之一，國(guó)內(nèi)有著廣泛應(yīng)用，市場(chǎng)招聘需求大。前端培訓(xùn)機(jī)構(gòu)幾乎一定有它的課程，而且都是重點(diǎn)推廣，每個(gè)學(xué)員都會(huì)拿到一大堆學(xué)習(xí)資料。

怎樣才能做出有特色的 Vue.js 教程呢？北京的京程一燈現(xiàn)在就推出了一個(gè)專(zhuān)項(xiàng)課程 《你不知道的Vue.js 性能優(yōu)化》。他們是騰訊課堂前端培訓(xùn) TOP 機(jī)構(gòu)之一，專(zhuān)注培養(yǎng)年薪40萬(wàn)的高級(jí)前端工程師，目前和騰訊課堂聯(lián)合運(yùn)營(yíng)，畢業(yè)生平均薪水可以達(dá)到25.5K。

為了與市場(chǎng)上其他課程區(qū)隔，保證輸出優(yōu)質(zhì)內(nèi)容，讓學(xué)員真正有收獲，本次專(zhuān)題課深度講解 Vue.js 性能優(yōu)化，以及 Vue3.0 那些值得關(guān)注的新特性。高級(jí)前端崗位面試中，性能優(yōu)化是一個(gè)必問(wèn)的知識(shí)點(diǎn)，本課程通過(guò)對(duì) Vue 面試核心知識(shí)點(diǎn)的拆解，帶你解鎖 Vue.js 性能優(yōu)化，目標(biāo)是幫助學(xué)員拿到大廠(chǎng) offer。下面是課程部分內(nèi)容。

1.Vue首屏優(yōu)化實(shí)踐。2.核心優(yōu)化方案和工程化剖析3.面試常問(wèn)的 Vue 雙向數(shù)據(jù)深度解析4.深度對(duì)比 Vue2 & 3 的雙向數(shù)據(jù)綁定

購(gòu)課之后，還將贈(zèng)送價(jià)值196元的《Webpack 從入門(mén)到精通》全系列教程。

References

[1]《中國(guó)互聯(lián)網(wǎng)報(bào)告》:https://www.ifanr.com/1254954

[2]“騰訊課堂”:https://ke.qq.com/

[3]“騰訊課堂101計(jì)劃”:https://edu.qq.com/a/20190119/005414.htm