手機現在是網際網路的最大入口。根據《中國網際網路報告》，手機網民已經超過8億，人均每天上網三個多小時。
毫不奇怪，手機應用軟體（mobile application，簡稱 mobile App）的開發工程師供不應求，一直是 IT 招聘的熱門。
如果你開始學習手機 App 開發，就一定會聽到 H5 這個詞。它是目前的主流開發技術之一，容易上手，開發週期短、成本低、相容傳統 Web 開發。但是，很少有文章詳細介紹，H5 到底是什麼技術，有什麼原理，跟其他技術的差異在哪裡。
本文就是 H5 的入門教程，今天是第一篇，介紹基本概念。內容儘量通俗，不過本來也沒有太複雜的東西。我希望這篇文章可以幫助新手入門，也可以供熟練開發者回顧和整理知識點。
感謝國內最大的線上教育平臺之一"騰訊課堂" 贊助這個系列教程。他們現在啟動了"騰訊課堂101計劃"，推廣優質課程資源。希望提高前端技術水平的朋友，可以留意一下本文結尾的課程"一元錢"課程資訊。
一、H5 的含義
表面上看，手機 App 都是同樣的東西，就是手機上的應用程式，點選圖示就能執行，但是它們的底層技術不一樣。按照開發技術，App 可以分成三大類。
- 原生應用（native application，簡稱 native App）
- Web 應用（web application，簡稱 Web App）
- 混合應用（hybrid application，簡稱 hybrid App）
這三類 App 的技術模型都不一樣，各有優缺點。企業一般會選擇其中一種作為主要技術棧，構建自己的手機 App。
H5 這個詞，可以理解成就是混合 App 模型，只不過它特指混合 App 的前端部分。 因為混合 App 的前端就是 HTML5 網頁，所以簡稱 H5。這個詞是國內獨有的，基本上都是前端程式設計師在用，國外不用這個詞，就直接叫混合 App。
真正理解 H5 開發，需要先搞清楚什麼是原生 App、什麼是 Web App，因為混合 App 是在它們的基礎上誕生的。
二、原生應用
2.1 概念
原生 App 是專門為特定手機平臺開發的應用程式 ，無法在其他平臺執行。一個手機軟體如果要同時支援蘋果手機和安卓手機，就需要為它們各寫一個原生 App。
歷史上，原生 App 最早出現，跟智慧手機系統一起誕生。2007年6月 iPhone 誕生，2008年9月安卓誕生，就同時釋出了自家平臺的原生 App 開發方法。
原生 App 使用與手機作業系統相同的語言。iOS 的原生 App 使用 Objective-C 語言或 Swift 語言，安卓使用 Java 語言或 Kotlin 語言。由於跟底層系統的語言和技術模型一致，所以原生 App 的效能和使用者體驗都很好。
2.2 優點
原生 App 的優點主要是兩個：（1）較好的效能和體驗；（2）可以使用系統的所有硬體和軟體 API，比如 GPS、攝像頭、麥克風、加速計、通知推送等等，能充分發揮系統的潛力。
2.3 缺點
原生 App 的缺點主要是成本，每個手機平臺都要建立一個獨立的開發團隊，大公司一般都有 iOS 和安卓兩個開發團隊。如果出現第三個平臺（以前的 Windows Phone，也許將來的華為鴻蒙 OS），就要組建第三個團隊，成本就更高。
第二個缺點是，原生 App 使用底層作業系統的語言，都是很重的編譯型語言，開發和除錯成本相對較高，時間週期長。
第三個缺點是，原生 App 必須下載安裝才能使用，只要升級版本，就必須重新下載安裝。使用者往往不願意更新版本，廠商被迫不得不長期支援很久以前的舊版本。
三、Web 應用
3.1 概念
Web App 是使用網頁做的應用程式，必須在瀏覽器中使用。 比如，你在瀏覽器中收發郵件，就是在使用 Web App。
Web App 主要使用網頁技術，即 HTML、JavaScript 和 CSS。2008年，w3c 組織釋出了 HTML 第5版，簡稱 HTML 5，該版本大大增強了網頁的功能，使得網頁可以當作應用程式使用，而不僅僅是展示文字和圖片，這就是 Web App 的由來。
3.2 優點和缺點
Web App 的優點是：（1）不需要下載安裝，開啟瀏覽器就能使用，而且總是使用最新版本；（2）對於開發者來說，Web App 寫起來比較快，除錯容易，不需要應用商店的批准就能釋出。
Web App 的主要缺點有兩個。首先，瀏覽器提供的 API（即 Web API）很有限（目前只有相機、GPS、電池等少數幾個），大部分系統硬體都不能通過網頁訪問，也無法直接讀取硬碟檔案，所以 Web App 無法充分利用平臺的硬體。
第二個缺點是，網頁通過瀏覽器渲染，效能不如原生 App，不適合做效能要求較高的頁面。
3.3 Web App 的劣勢
Web App 需要開啟瀏覽器才能使用，這意味著，使用者必須記住如何導航到它，要麼直接輸入網址，要麼翻找書籤。這使得進入 Web App，遠不如原生 App 方便。這點很致命，事實表明，使用者偏好原生 App。
谷歌曾經調查了原生 App 和 Web App 各一千個，發現 Web App 可以覆蓋更多的使用者（1100萬 vs 400萬），但是原生 App 的使用者使用時間（188分鐘）遠超 Web App（9分鐘）。
另一項調查發現，使用者87％的時間用在原生 App，13％的時間用在 Web App。由於這個原因，企業很少開發 Web App，都把原生 App 當作首選。
但是，Web App 也不是毫無競爭力。根據調查，普通使用者每月平均使用27個原生 App，但訪問了100多個手機網站。這意味著，使用者的 App 使用時間都被頭部 App 佔據了，小公司的 App 使用頻率非常低，獲客成本極高，最終變成殭屍 App。因此，小公司開發 Web App 更划算，不僅成本低，而且可以服務更多的使用者，以及更好地宣傳自己（可以被搜尋引擎收入）。
3.4 PWA
為了推廣 Web App，谷歌公司的 Chrome 瀏覽器團隊做了很多努力。他們認為，Web App 足以滿足大多數 App 的需求，但是三大缺陷阻礙它的推廣。
- 不能從手機的首屏直接進入。
- 缺乏手機狀態列和鎖屏時的通知推送能力。
- 不支援離線訪問（即斷網也能使用）。
為了解決這些問題，Chrome 團隊開發了新技術"漸進式 Web App"（Progressive Web App，縮寫 PWA）。它可以把網站快取在手機裡面，供離線時使用，還能在手機首屏生成圖示，直接點選進入，並且有通知推送能力，也不帶有瀏覽器的位址列和狀態列，跟原生 App 的使用體驗非常接近。
但是，PWA 需要瀏覽器訪問一次網站，才能在首屏生成圖示，並且目前 iOS 系統的支援還不夠理想，所以還只是一項探索性質的技術，迄今為止缺乏足夠的成功案例。
四、混合應用
4.1 概念
混合 App （hybrid App）顧名思義就是原生 App 與 Web App 的結合。它的殼是原生 App，但是裡面放的是網頁。 可以理解成，混合 App 裡面隱藏了一個瀏覽器，使用者看到的實際上是這個隱藏瀏覽器渲染出來的網頁。
混合 App 的原生外殼稱為"容器"，內部隱藏的瀏覽器，通常使用系統提供的網頁渲染控制元件（即 WebView 控制元件），也可以自己內建一個瀏覽器核心。結構上，混合 App 從上到下分成三層：HTML5 網頁層、網頁引擎層（本質上是一個隔離的瀏覽器例項）、容器層。
4.2 API Bridge
混合 App 裡面的網頁不同於普通網頁，可以呼叫底層系統所有的 API。奧祕就在於外層容器提供了 API Bridge，充當底層 API 的中介，允許內部的網頁呼叫底層。
所謂 API Bridge 就是容器在底層介面和網頁之間，建立一座橋樑，讓雙方通訊。容器一旦接到網頁的請求，就根據請求去呼叫底層系統的 API，然後再返回結果給網頁。API Bridge 往往以 JavaScript 語言提供，方便網頁呼叫，這時又稱為 JSbridge。
不同容器的 API Bridge 是不一樣的。為某個容器寫的網頁，不能放在另一個容器使用，也無法在瀏覽器使用，除非網頁尾本做了相容處理。
容器提供的 API Bridge 必須跟著平臺更新。比如，iOS 發了新版本，有了新的硬體 API，容器也必須跟著推出新版的 API Bridge。如果容器沒有跟上，開發者為了使用新的硬體，就只能想辦法自己來寫缺失的 API Bridge。
4.3 優點
混合 App 同時具有原生 App 和 Web App的優點，又可以避免它們的一些缺點。具體來說，可以總結為三點。
（1）跨平臺
Web 技術是跨平臺的，開發者只寫一次頁面，就能支援多個平臺。也就是說，混合 App 只需要一個團隊就夠了，開發成本較低。
（2）靈活性
混合 App 的靈活性大，很容易整合多種功能。一方面，混合 App 很容易載入外部的 H5 頁面，實現 App 的外掛結構；另一方面，Web 頁面可以方便地呼叫外部的 Web 服務。
（3）開發方便
Web 頁面的除錯和構建，遠比原生控制元件簡單省時。頁面的更新也容易，只要在伺服器上釋出新版本，觸發容器內更新就可以了。另外，Web 開發人員也比較容易招聘，傳統的前端程式設計師可以承擔開發任務。
4.4 缺點
混合 App 的主要缺點是，由於存在網頁引擎的中間層，所以效能比較欠缺，不僅不如原生 App，而且由於 WebView 不是全功能瀏覽器，可能比 Web App 都要慢一些。
另一個缺點是，由於頁面跨平臺，就無法使用只有特定平臺提供的功能，導致體驗不如純的原生 App。舉例來說，早期的時候，安卓有物理的後退按鈕，iPhone 沒有，頁面設計不得不考慮這一點。
上圖是 iOS 頁面。
上面是安卓頁面，左上角的後退按鈕，跟系統的後退按鈕重複了。
4.5 小程式
最後，再來談談微信小程式。
所謂小程式，可以看作是針對特定容器的 H5 開發。微信本身是一個容器，開放自己的介面（JSbridge），外部開發者使用規定的語法，編寫頁面，容器可以動態載入這些頁面。
小程式對於微信官方的好處是，擴充套件了功能和應用場景，吸引外部開發者加入，繁榮了生態。對於外部開發者的好處是，有了流量入口，可以直接呼叫微信的各種功能（比如支付）。
今天對於 H5 相關概念的介紹，就到這裡為止，下一篇文章將介紹 H5 相關開發工具和框架。
（正文完）
騰訊課堂推薦課程《你不知道的 Vue.js 效能優化》
當今時代，IT 教育蓬勃發展，各種課程層出不窮，知識唾手可得。你可能經常領取到海量的前端開發資料包，往往收藏起來就再也沒看過。
Vue.js 就是這種情況，作為前端的主流框架之一，國內有著廣泛應用，市場招聘需求大。前端培訓機構幾乎一定有它的課程，而且都是重點推廣，每個學員都會拿到一大堆學習資料。
怎樣才能做出有特色的 Vue.js 教程呢？北京的京程一燈現在就推出了一個專項課程 《你不知道的Vue.js 效能優化》 。他們是騰訊課堂前端培訓 TOP 機構之一，專注培養年薪40萬的高階前端工程師，目前和騰訊課堂聯合運營，畢業生平均薪水可以達到25.5K。
為了與市場上其他課程區隔，保證輸出優質內容，讓學員真正有收穫，本次專題課深度講解 Vue.js 效能優化，以及 Vue3.0 那些值得關注的新特性。高階前端崗位面試中，效能優化是一個必問的知識點，本課程通過對 Vue 面試核心知識點的拆解，帶你解鎖 Vue.js 效能優化，目標是幫助學員拿到大廠 offer。下面是課程部分內容。
- Vue首屏優化實踐。
- 核心優化方案和工程化剖析
- 面試常問的 Vue 雙向資料深度解析
- 深度對比 Vue2 & 3 的雙向資料繫結
掃描下圖二維碼，進群領取優惠券，原價98元的課程，現在只需要 1 元 。
購課之後，還將贈送價值196元的《Webpack 從入門到精通》全系列教程（點選看大圖）。
（完）