掘力計劃第 20 期：崔紅保-跨端框架性能優(yōu)化實踐

量子位的朋友們 2023-07-31 18:33:10 來源：量子位

在掘力計劃系列活動第20場， uni-app 跨端框架負責(zé)人、DCloud CTO、跨平臺開發(fā)老兵崔紅保分享了跨端框架性能優(yōu)化實踐。

直播摘要：

近些年，跨平臺開發(fā)早已是大家熟知的一種開發(fā)范式，但跨平臺開發(fā)依然常被開發(fā)者詬病？原因何在？如何改進解決？本次演講，崔紅保將重點介紹 App 平臺的性能堵點及解決方案，并將介紹 UTS 這種新的開發(fā)范式。UTS 采用類 TS 的 DSL，通過 Rust 編譯成 swift/Kotlin，獲得純正原生 App，在徹底解決傳統(tǒng) Hybrid App 性能頑疾的前提下，借助 web 生態(tài)，解放生產(chǎn)力，快速交付。

一、跨端框架設(shè)計的核心要素

選擇跨端框架時，要考量的要素包括：

• 功能性：需要支持的終端類型和功能模塊，如小程序、APP 等。
• 擴展性：能否支持新增平臺和功能，如新增小紅書小程序。
• 性能：評測報告中的交互體驗，如長列表滑動流暢度。
• 生態(tài)：開發(fā)者熟悉度，以及可復(fù)用組件的豐富度。
• 開發(fā)體驗：現(xiàn)代 web 開發(fā)體驗、清晰明確的錯誤提示、熱重載等。
• 工程化：是否支持 CI/CD、自動化測試等。

二、跨端框架在性能維度的共性問題

大部分類小程序的跨端框架采用 JavaScript 邏輯層 與渲染層分離的架構(gòu)。JavaScript 運行在獨立環(huán)境中，通過橋接與原生通信。這種架構(gòu)因 web 渲染引擎，常有一些性能問題：

1. 白屏?xí)r間長，頁面切換卡頓。
   1. 這是因為需要先構(gòu)建 DOM 樹和 CSSOM 樹，才能完成頁面布局和渲染。
2. 手勢操作不流暢，如地圖縮放抖動。
   1. 無法達到每秒 60 幀的效果，交互體驗不佳。
3. 缺乏某些組件的深度定制能力，如鍵盤。
   1. 不同的輸入場景需要不同彈出動畫或形態(tài)的鍵盤。

為改進此問題，多采用混合渲染方案，關(guān)鍵組件使用原生實現(xiàn)，而非 Web 渲染。但又帶來了新的問題：

1. 原生組件層級永遠最頂，無法調(diào)整。導(dǎo)致覆蓋關(guān)系錯亂。
2. 頻繁的層間通信依然存在，如頁面滾動時需高頻通知原生組件移動位置。
3. 字體風(fēng)格不統(tǒng)一，原生組件字體隨系統(tǒng)變化，Web 組件字體受頁面 CSS 影響，UI 風(fēng)格不協(xié)調(diào)。

完全使用原生渲染可以避免視圖層問題，但進程之間的通信依然存在，會 block 渲染線程。業(yè)內(nèi)使用方案如 React Native 也無法根本解決。

通訊組賽在各個框架都存在一些問題

三、UTS:純原生跨平臺開發(fā)框架

UTS 的工作原理是，使用 TypeScript 編寫代碼邏輯，通過編譯器轉(zhuǎn)換為 Kotlin/Swift 源碼，并注入響應(yīng)系統(tǒng)，最終編譯生成跨平臺原生 App。

具體實現(xiàn)要點是：

1. 仍基于 Web 技術(shù)棧，以便利用豐富的生態(tài)。

2. 使用原生渲染，擯棄 Web 渲染缺陷。

3. 消滅 JS 進程，使視圖和邏輯在同一線程，避免通信阻塞。
4. 編譯器分析 TS 語法樹，轉(zhuǎn)換為目標(biāo)語言，解決兩種語言的語法差異。
5. 通過屬性攔截等方式注入 Runtime，實現(xiàn)原生版的 Vue-runtime。

通過此種手段，在 iOS 和 Android 平臺都可以獲得高性能的原生應(yīng)用。

四、云端一體，跨端之上的最佳實踐

云端一體，是在跨端之上引入 serverless 的開發(fā)模式，這是一種更為高效的開發(fā)模式：

1. 云端一體，改變了傳統(tǒng)的前后端分離的協(xié)作模式，將應(yīng)用程序的部分邏輯放到前端，讓前端工程師直接參與后端業(yè)務(wù)邏輯，無需等待后端團隊開發(fā)接口，節(jié)省溝通成本、人力成本，加快應(yīng)用上線交付效率。
2. 前端組件可直接關(guān)聯(lián)數(shù)據(jù)庫，大幅簡化 CRUD 場景開發(fā)。
3. 云對象的模式，簡化傳統(tǒng)的 Ajax 請求，像 ES6 中的 import/export 一樣，前端直接引入云端的接口對象。
4. 云端一體，可基于業(yè)務(wù)場景制造更高效的組件輪子，改變傳統(tǒng)前后端分離導(dǎo)致的輪子割裂

綜上所述，云端一體，可以幫助開發(fā)者專注業(yè)務(wù)、聚焦商業(yè)、節(jié)省人力、提高效率，是一種基于跨端框架之上的最佳實踐。

關(guān)于掘力計劃

掘力計劃由稀土掘金技術(shù)社區(qū)發(fā)起，致力于打造一個高品質(zhì)的技術(shù)分享和交流的系列品牌。聚集國內(nèi)外頂尖的技術(shù)專家、開發(fā)者和實踐者，通過線下沙龍、閉門會、公開課等多種形式分享最前沿的技術(shù)動態(tài)。