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