AI在线 AI在线

DCloud CTO崔红保:跨端框架性能优化实践

在掘力计划系列活动第20场, uni-app 跨端框架负责人、DCloud CTO、跨平台开发老兵崔红保分享了跨端框架性能优化实践。

近些年,跨平台开发早已是大家熟知的一种开发范式,但跨平台开发依然常被开发者诟病?原因何在?如何改进解决?本次演讲,崔红保重点介绍 App 平台的性能堵点及解决方案,并将介绍 UTS 这种新的开发范式。UTS 采用类 TS 的 DSL,通过 Rust 编译成 swift/Kotlin,获得纯正原生 App,在彻底解决传统 Hybrid App 性能顽疾的前提下,借助 web 生态,解放生产力,快速交付。

一、跨端框架设计的核心要素

DCloud CTO崔红保:跨端框架性能优化实践

选择跨端框架时,要考量的要素包括:

功能性:需要支持的终端类型和功能模块,如小程序、APP 等。扩展性:能否支持新增平台和功能,如新增小红书小程序。 性能:评测报告中的交互体验,如长列表滑动流畅度。生态:开发者熟悉度,以及可复用组件的丰富度。开发体验:现代 web 开发体验、清晰明确的错误提示、热重载等。工程化:是否支持 CI/CD、自动化测试等。

二、跨端框架在性能维度的共性问题

DCloud CTO崔红保:跨端框架性能优化实践大部分类小程序的跨端框架采用 JavaScript 逻辑层 与渲染层分离的架构。JavaScript 运行在独立环境中,通过桥接与原生通信。这种架构因 web 渲染引擎,常有一些性能问题:

白屏时间长,页面切换卡顿。这是因为需要先构建 DOM 树和 CSSOM 树,才能完成页面布局和渲染。手势操作不流畅,如地图缩放抖动。无法达到每秒 60 帧的效果,交互体验不佳。 缺乏某些组件的深度定制能力,如键盘。不同的输入场景需要不同弹出动画或形态的键盘。

为改进此问题,多采用混合渲染方案,关键组件使用原生实现,而非 Web 渲染。但又带来了新的问题:

原生组件层级永远最顶,无法调整。导致覆盖关系错乱。频繁的层间通信依然存在,如页面滚动时需高频通知原生组件移动位置。字体风格不统一,原生组件字体随系统变化,Web 组件字体受页面 CSS 影响,UI 风格不协调。

完全使用原生渲染可以避免视图层问题,但进程之间的通信依然存在,会 block 渲染线程。业内使用方案如 React Native 也无法根本解决。

通讯组赛在各个框架都存在一些问题

DCloud CTO崔红保:跨端框架性能优化实践

三、UTS:纯原生跨平台开发框架 

UTS 的工作原理是,使用 TypeScript 编写代码逻辑,通过编译器转换为 Kotlin/Swift 源码,并注入响应系统,最终编译生成跨平台原生 App。

具体实现要点是:

仍基于 Web 技术栈,以便利用丰富的生态。

DCloud CTO崔红保:跨端框架性能优化实践

使用原生渲染,摈弃 Web 渲染缺陷。

DCloud CTO崔红保:跨端框架性能优化实践

消灭 JS 进程,使视图和逻辑在同一线程,避免通信阻塞。编译器分析 TS 语法树,转换为目标语言,解决两种语言的语法差异。通过属性拦截等方式注入 Runtime,实现原生版的 Vue-runtime。

通过此种手段,在 iOS 和 Android 平台都可以获得高性能的原生应用。

四、云端一体,跨端之上的最佳实践

云端一体,是在跨端之上引入 serverless 的开发模式,这是一种更为高效的开发模式:

云端一体,改变了传统的前后端分离的协作模式,将应用程序的部分逻辑放到前端,让前端工程师直接参与后端业务逻辑,无需等待后端团队开发接口,节省沟通成本、人力成本,加快应用上线交付效率。前端组件可直接关联数据库,大幅简化 CRUD 场景开发。云对象的模式,简化传统的 Ajax 请求,像 ES6 中的 import/export 一样,前端直接引入云端的接口对象。云端一体,可基于业务场景制造更高效的组件轮子,改变传统前后端分离导致的轮子割裂

综上所述,云端一体,可以帮助开发者专注业务、聚焦商业、节省人力、提高效率,是一种基于跨端框架之上的最佳实践。

相关资讯

全球首个联邦学习工业级开源框架FATE更新!五大模块迎来巨幅优化

FATE(Federated AI Technology Enabler)是微众银行AI团队研发的全球首个联邦学习工业级开源框架,旨在提供安全的计算框架来支持联邦 AI 生态。FATE 实现了基于同态加密和多方计算(MPC)的安全计算协议,它支持联邦学习架构和多种机器学习算法的联邦学习实现,包括逻辑回归、基于树的算法、深度学习和迁移学习等等。3月31日,FATE推出 v1.6版本更新。在1.6版本中,优化了性能效率及稳定性,在使用体验方面,根据社区的反馈也有多方面的优化,将带来更流畅的使用体验。此外,新版本对其他F
3/31/2021 6:20:00 PM
新闻助手

Figma 解释其 AI 工具生成设计太像苹果天气 App 原因:缺乏审查导致

Figma 公司于 7 月 17 日发布博文,解释 AI 工具“生成设计”(Make Designs)为何生成的设计接近苹果天气 App,认为最主要的原因是缺乏内部审查。“生成设计”工作原理AI在线援引 Figma 设计副总裁 Noah Levin 解释内容,Make Designs 依赖于三个要素:模型、情境和提示词。模型方面主要依赖 OpenAI 的 GPT-4o、亚马逊的 Titan 等多个现有模型,意味着公司不需要进行任何额外的培训或其他更改。而为了调用这些模型,Figma 为移动应用程序和桌面应用程序创建
7/20/2024 8:11:59 AM
故渊

AI 时代如何更高效开发前端组件?21st.dev 给了一种答案

给大家推荐一个好东西:21st.dev ,大致上你可以将它理解为一个非常前卫的组件托管市场,特别之处在于:它参考 shadcn/ui 的设计理念提供了一种原子化的,Code Out 形式的依赖安装、管理模式;并且更具有启发性的,它为每一个组件都提供了一套用于生成组件代码的 Prompt,用户可以借此在特定项目上下文中生成适配度更高的组件效果。 借助 21st.dev 与 cursor,我做了这样一个 demo: 这一切都是在 5min 内,不写一行代码的情况下实现的! 更值得称谓的是,21st.dev 的功能设计真正做到了 AI 友好,能够很好地应用在各类 AI 工具中(cursor、v0.dev、bolt.new、cline 等等),并且这套设计逻辑还非常适合复用到各种 TO-D 场景中,21st.dev 是什么21st.dev 是一个开源的 React  UI 组件市场,专门为设计工程师和前端开发者提供高质量的 UI 组件。
4/3/2025 9:04:19 AM
范文杰