概述
简介
“小程序Lynx 渲染引擎” 是抖音小程序侧推出的基于原生 UI 的高性能渲染方案。在保持极致性能体验的同时,对齐小程序标准规范,即开发者可以继续沿用 TTML、TTSS 和 JavaScript 开发方式,按页面逐步接入,即可达到更快的打开速度、更稳定的功能体验。与线上已有的渲染类型区别是
- •小程序 Lynx 渲染方案:基于原生 UI 的小程序渲染框架。
- •小程序 WebView 渲染方案:基于 Web 技术的小程序渲染框架,即 Lynx 推出前小程序使用的渲染框架。
前提条件
Lynx 渲染复用小程序的上层开发方式,但并不完全等同于 WebView 的开发。接入时 需要检查框架、组件、API 和样式的支持范围,并对存在差异的部分进行适配。如果是针对线上已有小程序进行迁移,也可以先迁移单个页面,再根据验证结果逐步扩大范围。
接入前请确认客户端、基础库和开发者工具满足版本要求,并检查页面依赖的能力是否受支持。环境要求见“快速开始”。
抖音客户端 | 版本:39.8.0 |
基础库 | 版本:>= 4.25.0 |
开发者工具 | 4.5.7 及以上版本,下载地址 |
目标
极致的性能和稳定性:采用 Lynx 高性能渲染机制,有效解决加载慢、白屏等体验瓶颈。线上场景数据验证,部分业务接入后核心体验指标(如 LCP / FMP 耗时)优化幅度超过 20%,启动到达率和业务指标也能得到提升。
渲染方式
以页面配置类型区分,WebView 页面由 WebView 承担页面渲染。Lynx 页面由 Lynx 引擎处理页面元素和样式,并使用客户端原生渲染能力展示界面。两者面向相同的小程序业务开发场景,但底层渲染实现和部分行为不同。
开发层次 | Lynx 小程序中的职责 |
业务开发 | 使用 TTML 描述结构、TTSS 描述样式、JavaScript 实现业务逻辑。 |
小程序框架 | 提供 Page、Component 和小程序组件、API 等开发接口;迁移注意事项见“从 WebView 迁移”。 |
页面渲染 | 在支持条件满足且页面启用 Lynx 时,由 Lynx 引擎承担渲染。 |
Lynx 引擎文档可以帮助理解原生渲染和样式模型,但不代表其中的全部能力都已向抖音小程序开放。小程序的组件、API、配置和版本要求,以小程序接入说明为准;不要直接把 ReactLynx 的项目配置或 API 用于 TTML 小程序。
Lynx 小程序特性
Lynx 小程序在沿用 TTML、TTSS 和 JavaScript 开发方式的基础上,提供原生渲染、高性能列表等能力,帮助开发者构建更接近原生应用体验的小程序。开发者可以按页面逐步接入,并通过 WebView 兼容方案覆盖不支持 Lynx 的运行环境。
原生渲染
Lynx 页面由 Lynx 引擎处理页面元素、样式和布局,通过客户端原生渲染能力展示界面,为小程序提供 WebView 之外的渲染方案。
view、text 等基础组件由原生节点承载,滚动、轮播等交互组件也结合原生实现,为页面展示和交互体验优化提供基础。高性能列表
Lynx 小程序通过
scroll-view 的 type="list" 模式和 list-item 提供高性能列表能力,适用于商品列表、信息流等包含大量重复内容的页面。原生列表根据需要创建和挂载列表项节点,并支持同一逻辑项回收后的节点复用,避免一次性挂载全部列表项。开发者可以结合列表项高度或尺寸估算,优化动态内容场景下的布局与滚动表现。
高性能列表还支持列表项吸顶,便于构建分类标题、分组导航等交互。具体结构和布局约束见“高性能列表”。
延续小程序开发方式
Lynx 小程序继续使用 TTML 描述页面结构、TTSS 编写样式、JavaScript 实现业务逻辑,并沿用
Page、Component 等开发接口,便于复用现有业务代码与开发经验。同 时,开发者可以继续使用已支持的小程序开放能力,例如分享、获取手机号和客服能力。迁移主要围绕框架、组件、API 和样式差异展开,不需要重新学习一套业务开发语言。
渐进接入与低版本兼容
开发者可以为指定页面启用 Lynx,也可以在应用配置中统一设置渲染方式。已有项目可以先选择有明确体验优化需求的页面进行迁移,完成验证后再逐步扩大范围。在不满足 Lynx 支持条件的运行环境中,小程序可回退为 WebView 渲染。开发者还可以设置 Lynx 生效的基础库版本门槛,结合业务所需能力制定兼容策略。
需要覆盖低版本用户时,应同时验证 Lynx 和 WebView 两条渲染路径,并为 Lynx 专属能力保留兼容实现。自动回退负责选择渲染方式,不会自动转换不兼容的业务代码。
