掘力計(jì)劃第 20 期：崔紅保-跨端框架性能優(yōu)化實(shí)踐
在掘力計(jì)劃系列活動(dòng)第20場， uni-app 跨端框架負(fù)責(zé)人、DCloud CTO、跨平臺(tái)開發(fā)老兵崔紅保分享了跨端框架性能優(yōu)化實(shí)踐。
直播摘要：
近些年，跨平臺(tái)開發(fā)早已是大家熟知的一種開發(fā)范式，但跨平臺(tái)開發(fā)依然常被開發(fā)者詬??？原因何在？如何改進(jìn)解決？本次演講，崔紅保重點(diǎn)介紹 App 平臺(tái)的性能堵點(diǎn)及解決方案，并將介紹 UTS 這種新的開發(fā)范式。UTS 采用類 TS 的 DSL，通過 Rust 編譯成 swift/Kotlin，獲得純正原生 App，在徹底解決傳統(tǒng) Hybrid App 性能頑疾的前提下，借助 web 生態(tài)，解放生產(chǎn)力，快速交付。
一、跨端框架設(shè)計(jì)的核心要素
選擇跨端框架時(shí)，要考量的要素包括：
- 功能性：需要支持的終端類型和功能模塊，如小程序、APP 等。
- 擴(kuò)展性：能否支持新增平臺(tái)和功能，如新增小紅書小程序。
- 性能：評測報(bào)告中的交互體驗(yàn)，如長列表滑動(dòng)流暢度。
- 生態(tài)：開發(fā)者熟悉度，以及可復(fù)用組件的豐富度。
- 開發(fā)體驗(yàn)：現(xiàn)代 web 開發(fā)體驗(yàn)、清晰明確的錯(cuò)誤提示、熱重載等。
- 工程化：是否支持 CI/CD、自動(dòng)化測試等。
二、跨端框架在性能維度的共性問題
大部分類小程序的跨端框架采用 JavaScript 邏輯層 與渲染層分離的架構(gòu)。JavaScript 運(yùn)行在獨(dú)立環(huán)境中，通過橋接與原生通信。這種架構(gòu)因 web 渲染引擎，常有一些性能問題：
- 白屏?xí)r間長，頁面切換卡頓。
- 這是因?yàn)樾枰葮?gòu)建 DOM 樹和 CSSOM 樹，才能完成頁面布局和渲染。
- 手勢操作不流暢，如地圖縮放抖動(dòng)。
- 無法達(dá)到每秒 60 幀的效果，交互體驗(yàn)不佳。
- 缺乏某些組件的深度定制能力，如鍵盤。
- 不同的輸入場景需要不同彈出動(dòng)畫或形態(tài)的鍵盤。
為改進(jìn)此問題，多采用混合渲染方案，關(guān)鍵組件使用原生實(shí)現(xiàn)，而非 Web 渲染。但又帶來了新的問題：
- 原生組件層級永遠(yuǎn)最頂，無法調(diào)整。導(dǎo)致覆蓋關(guān)系錯(cuò)亂。
- 頻繁的層間通信依然存在，如頁面滾動(dòng)時(shí)需高頻通知原生組件移動(dòng)位置。
- 字體風(fēng)格不統(tǒng)一，原生組件字體隨系統(tǒng)變化，Web 組件字體受頁面 CSS 影響，UI 風(fēng)格不協(xié)調(diào)。
完全使用原生渲染可以避免視圖層問題，但進(jìn)程之間的通信依然存在，會(huì) block 渲染線程。業(yè)內(nèi)使用方案如 React Native 也無法根本解決。
通訊組賽在各個(gè)框架都存在一些問題
三、UTS:純原生跨平臺(tái)開發(fā)框架
UTS 的工作原理是，使用 TypeScript 編寫代碼邏輯，通過編譯器轉(zhuǎn)換為 Kotlin/Swift 源碼，并注入響應(yīng)系統(tǒng)，最終編譯生成跨平臺(tái)原生 App。
具體實(shí)現(xiàn)要點(diǎn)是：
- 仍基于 Web 技術(shù)棧，以便利用豐富的生態(tài)。
- 使用原生渲染，擯棄 Web 渲染缺陷。
- 消滅 JS 進(jìn)程，使視圖和邏輯在同一線程，避免通信阻塞。
- 編譯器分析 TS 語法樹，轉(zhuǎn)換為目標(biāo)語言，解決兩種語言的語法差異。
- 通過屬性攔截等方式注入 Runtime，實(shí)現(xiàn)原生版的 Vue-runtime。
通過此種手段，在 iOS 和 Android 平臺(tái)都可以獲得高性能的原生應(yīng)用。
四、云端一體，跨端之上的最佳實(shí)踐
云端一體，是在跨端之上引入 serverless 的開發(fā)模式，這是一種更為高效的開發(fā)模式：
- 云端一體，改變了傳統(tǒng)的前后端分離的協(xié)作模式，將應(yīng)用程序的部分邏輯放到前端，讓前端工程師直接參與后端業(yè)務(wù)邏輯，無需等待后端團(tuán)隊(duì)開發(fā)接口，節(jié)省溝通成本、人力成本，加快應(yīng)用上線交付效率。
- 前端組件可直接關(guān)聯(lián)數(shù)據(jù)庫，大幅簡化 CRUD 場景開發(fā)。
- 云對象的模式，簡化傳統(tǒng)的 Ajax 請求，像 ES6 中的 import/export 一樣，前端直接引入云端的接口對象。
- 云端一體，可基于業(yè)務(wù)場景制造更高效的組件輪子，改變傳統(tǒng)前后端分離導(dǎo)致的輪子割裂
綜上所述，云端一體，可以幫助開發(fā)者專注業(yè)務(wù)、聚焦商業(yè)、節(jié)省人力、提高效率，是一種基于跨端框架之上的最佳實(shí)踐。
