目前，主流的 App 主要有 3 種：Native App、Web App 和 Hybrid App。它們對(duì)應(yīng)了 3 種渲染模式：Native（純客戶端原生技術(shù)渲染）、WebView（純 Web 技術(shù)渲染）和 WebView+原生組件（Hybrid 技術(shù)）。一般來(lái)說(shuō)，Native 和WebView 的區(qū)別如表 7-1 所示。

表 7-1　Native 和 WebView 的區(qū)別

     而小程序最終選擇的是 WebView+原生組件，也就是 Hybrid 方式。顯然，這種方式結(jié)合了 Native 和 WebView 的一些優(yōu)勢(shì)，讓開(kāi)發(fā)者既可以享受 WebView 頁(yè)面的低門檻和在線更新，又可以使用部分流暢的 Native 原生組件，同時(shí)通過(guò)代碼包上傳、審核、發(fā)布的方式來(lái)對(duì)內(nèi)容進(jìn)行管控。
在體驗(yàn)方面，Native App 的體驗(yàn)確實(shí)比 Web App 好太多。對(duì)一個(gè) App 而言，加載快、渲染快是非常重要的。尤其是對(duì)于用戶停留時(shí)間較長(zhǎng)的 App 而言，用戶體驗(yàn)問(wèn)題至關(guān)重要。如果全民普及的微信在切換頁(yè)面的時(shí)候，經(jīng)常白屏或者數(shù)據(jù)加載很久才出來(lái)，那估計(jì)它早就被取代了。

     Web 開(kāi)發(fā)者大多知道原生渲染的體驗(yàn)優(yōu)勢(shì)，不少前端開(kāi)發(fā)者選擇使用 React Native、Weex 以及如今熱門的 Flutter，嘗試使用直接生成原生應(yīng)用的方式來(lái)進(jìn)行開(kāi)發(fā)。
但是小程序并不能使用原生開(kāi)發(fā)，因?yàn)樗倪\(yùn)行依賴一個(gè)宿主——微信客戶端。微信客戶端有自己的代碼，也有代碼包編譯和版本發(fā)布。顯然，開(kāi)發(fā)者的代碼是無(wú)法與微信官方的代碼包一起發(fā)布的，所以使用 Native 的方式來(lái)開(kāi)發(fā)小程序幾乎是不可行的。
     Web 開(kāi)發(fā)最大的優(yōu)勢(shì)在于開(kāi)發(fā)門檻低、效率高、支持在線更新。小程序使用WebView 可最大化前端開(kāi)發(fā)的優(yōu)勢(shì)，動(dòng)態(tài)下載代碼包加載的方式也允許開(kāi)發(fā)者進(jìn)行在線版本更新和 bug 修復(fù)。我們可以參考 Web App 的模式，把資源包放在云端，然后下載到本地，動(dòng)態(tài)加載后就可以渲染出界面了，開(kāi)發(fā)者還可以隨時(shí)對(duì)線上資源進(jìn)行動(dòng)態(tài)更新。
     同時(shí)，小程序框架提供了完整的基礎(chǔ)庫(kù)，通過(guò)微信客戶端內(nèi)置基礎(chǔ)庫(kù)、原生組件結(jié)合、提前準(zhǔn)備一個(gè)頁(yè)面用于熱加載等方式，可以減少加載時(shí)間，提升小程序啟動(dòng)的體驗(yàn)。
雖然使用 Web 的方式開(kāi)發(fā)有不少好處，但如果單純地使用 Web 技術(shù)來(lái)渲染小程序，在一些有復(fù)雜交互的頁(yè)面上可能會(huì)出現(xiàn)一些性能問(wèn)題。例如，把 JavaScript 腳本放到頁(yè)面頂部會(huì)導(dǎo)致明顯的延遲、空白頁(yè)面、用戶無(wú)法瀏覽內(nèi)容也無(wú)法和頁(yè)面進(jìn)行交互等問(wèn)題。
     這是因?yàn)樵?Web 技術(shù)中，UI 渲染與 JavaScript 的腳本在一個(gè)單線程中執(zhí)行，腳本會(huì)阻塞其他資源的下載，一些邏輯任務(wù)會(huì)搶占 UI 渲染的資源，因此會(huì)出現(xiàn)上述體驗(yàn)問(wèn)題。另外，Web 安全永遠(yuǎn)是業(yè)務(wù)開(kāi)發(fā)的首要關(guān)注點(diǎn)，對(duì)于 XSS 這種常見(jiàn)的 Web 安全注意事項(xiàng)，我們來(lái)看看小程序是怎么做的。