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

量子位的朋友們 2023-07-31 18:33:10 來(lái)源：量子位

在掘力計(jì)劃系列活動(dòng)第20場(chǎng)， 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，通過(guò) Rust 編譯成 swift/Kotlin，獲得純正原生 App，在徹底解決傳統(tǒng) Hybrid App 性能頑疾的前提下，借助 web 生態(tài)，解放生產(chǎn)力，快速交付。

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

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

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

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

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

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

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

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

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

通訊組賽在各個(gè)框架都存在一些問題

三、UTS:純?cè)缙脚_(tái)開發(fā)框架

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

具體實(shí)現(xiàn)要點(diǎn)是：

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

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

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

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

四、云端一體，跨端之上的最佳實(shí)踐

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

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

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

關(guān)于掘力計(jì)劃

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