logologo Lynx Search Docs CtrlK GuideAPIsBlogContribute 简体中文 English Guide APIs Blog Contribute 简体中文 English ON THIS PAGE

2025 年 3 月 5 日

Lynx：解锁更多原生能力#

Xuan Huang Architect @ Lynx The Lynx Team lynxjs.org

今天，我们很高兴推出 Lynx，一个 家族 的技术，它使开发人员能够使用他们现有的 Web 技能，从单个代码库中为移动和 Web 创建真正的原生 UI。Lynx 专为各种用例和丰富的交互性而设计，为像 TikTok 这样的大型应用程序提供充满活力和引人入胜的 UI，它具有快速、通用的渲染引擎、性能驱动的双线程 UI 编程、基于现代 Rust 的工具等等！

我们非常感谢所有先前塑造了跨平台开发领域的艺术，并渴望通过今天 开源 Lynx 来为这一运动做出贡献，邀请更多的开发人员以更大的自由度和生产力来构建应用程序。

以规模和速度交付原生体验#

对于数字原生代来说，手机及其上的应用程序是他们的首要数字体验。对于这些以应用为中心的用户而言，非原生体验不仅不方便，而且是一个危险信号。空白屏幕、"点赞"动画中 0.1 秒的延迟或不熟悉的 UI 模式会使界面感觉 "廉价" 或不可信。我们认为，原生基元和响应能力不仅仅是锦上添花 - ** 原生是必需品**。

尽管应用程序经济迅速增长，但以 规模 和 速度 交付此类体验仍然是一项挑战。不断增长的各种外形尺寸和平台迫使开发人员多次重建相同的体验，从而导致精力浪费、团队孤立和上市时间延迟。我们相信，通过使开发人员能够构建一次并覆盖更多平台，我们可以为更多用户提供快乐，更快。

TikTok 作为一个以移动为先的平台而闻名和喜爱，它不断地为世界各地多样化和充满活力的用户带来创新和引人入胜的体验。为了满足这些需求，它逐渐采用了 Lynx，并且越来越依赖它。如今，Lynx 为极其广泛的界面提供支持 - 从轻量级、高频率的 Search 面板到功能齐全的 TikTok Studio 应用程序；从需要可靠性和信任的复杂电子商务店面（如 Shop）到高度吸引人的体验（如 LIVE），以及为引人注目的活动和文化时刻（如 Disney100 on TikTok 和 The Met Gala on TikTok）提供支持。

lynx-in-tiktok TikTok 对 Lynx 的广泛使用

我们相信，规模 和 速度 意味着不仅仅是将功能、错误修复或优化应用于所有平台以提高成本效率。它还意味着 通用性，即将相同的共享技术基础适应各种各样的场景 - 而无需为每个独特的用例构建新的团队或重新发明轮子。

激发和丰富 Web 社区#

Web 平台最初是为 文档 而创建的，然后 逐渐 演变为 开发平台。然而，它仍然 面临限制，从而减慢了其快速适应和创新的能力。因此，塑造用于跨平台开发的 Web 技术已成为行业中的一个明确规范。自 2008 年以来，PhoneGap（后来的 Cordova）努力将 Web 作为跨平台解决方案，方法是用原生功能增强 Webview。2015 年，React Native 开创了将原生 UI 与 Web 技术桥接的先河，从而可以在移动设备上使用 React.js 实现声明式 UI。同年，Flutter 凭借其 Web 传统，采用了类似的声明式 UI 模型，并引入了一种使用自定义渲染引擎的新方法。

Lynx 遵循了类似的精神 - 您可以将其视为 "专为应用程序开发量身定制的替代 Web"。它旨在尊重 Web 技术的资产，同时采取一种有主见的态度，支持类似 Web 的 API，并有明确意图地添加约束和扩展。

为了说明这种平衡，让我分享两个示例：一个是我们选择遵循 Web 的示例，另一个是我们有意做出改变的示例。

像往常一样使用 Markups 和 CSS 制作设计#

UI 技术的本质是为了提供卓越的产品设计。Lynx 拥抱 Web 开发的熟悉性，允许开发人员像编写 Web 一样编写 markup 和 CSS。Lynx 原生支持 CSS 动画和过渡、用于主题设置的 CSS 选择器和变量 以及现代 CSS 视觉效果（如 渐变、[裁剪和遮罩](https://lynxjs.org/blog/</guide/styling/appearance.html#clipping-and-masking>） - 所有这些都旨在释放 Web 社区的创造力，以实现流行的 设计工程。

1import{ root }from"@lynx-js/react";2
3functionApp(){4return(5<view6style={{7    marginTop:"50%",8    transform:"translate(-50%, -50%)",9    marginLeft:"50%",10    width:"150px",11    height:"150px",12}}13>14<view15style={{16     flexDirection:"column",17     background:"radial-gradient(circle at top left, rgb(255,53,26), rgb(0,235,235))",18     width:"100%",19     height:"100%",20     maskImage:"radial-gradient(circle 75px, black 75%, transparent)",21     position:"absolute",22}}23>24<text25style={{26      fontSize:"32px",27      fontWeight:"bold",28      alignSelf:"center",29      color:"white",30      marginTop:"50%",31      transform:"translateY(-50%)",32}}33>34     LYNX
35</text>36</view>37</view>38);39}40
41root.render(<App/>);42
43if(import.meta.webpackHot){44import.meta.webpackHot.accept();45}

预览 Web QRCode csssrc/mask_image_circle_gradient/index.tsx 预览 使用 mask-image 创建具有渐变边缘的圆形区域

以负责任的方式使用主线程进行交互#

Lynx 最显著的架构决策之一是其对用户脚本的 静态强制划分 为两个不同的运行时：一个 主线程 运行时，由 PrimJS 提供支持，PrimJS 是一种专门为 Lynx 优化的自定义 JavaScript 引擎，专用于特权、同步的 UI 任务，如初始启动和高优先级事件处理；以及一个 后台 运行时 作为用户代码的默认设置，确保主线程保持低工作负载和 非阻塞。这使 Lynx 具有两个杀手级功能：

  1. 即时首帧渲染 (IFR)：在 可用性研究 的支持下，如果渲染速度足够快 - 而 Lynx 就是如此 - 则不需要特殊的中间反馈。通过短暂地阻止主线程，直到完全渲染完第一帧，Lynx 消除了空白屏幕，从而创造了一种感知的即时体验。
  2. 主线程脚本 (MTS)：一小段静态调度的代码，有权在主线程上运行，处理高优先级事件和手势 - 使其成为实现丝般顺滑、高度响应的界面的理想选择，这种界面感觉就像原生的一样。

IFR MTS

您是否注意到 IFR 的感觉有多么即时，以及 MTS 有多么快速？让我们 将其速度降低 4 倍，以便我们可以仔细观察！

IFR (0.25x) MTS (0.25x)

在内部，我们已经看到从 Web 迁移到 Lynx 的界面通常可以 全面减少 2-4 倍的启动时间。我们的内部基准测试还表明，Lynx 在 Android 上始终以更快的速度启动，同时在 iOS 上与类似技术保持竞争力。

开源 Lynx#

Lynx 最初是由 ByteDance 的一个工程团队开发的，该团队继续推动其开发。作为 Lynx 的重要用户，TikTok 认识到 Lynx 的创新和潜力，并且一直在 TikTok 的一系列应用程序中广泛使用它。TikTok 将促进 Lynx 的开源发布，并在多个领域提供支持，包括资金、技术增强、社区推广和生态系统增长。

普及跨平台技术#

多年来，Web 开发人员的跨平台开发一直由少数几家主要厂商建立的模式和解决方案所定义。虽然我们赞扬他们做出的卓越贡献，但对方法的多样性需求越来越高。Lynx 寻求改变这种状况，它不是开源单个固定的解决方案，而是开源一个 元基础设施，使面临类似规模和速度挑战的团队和企业能够构建自己的跨平台解决方案。

我们将 ReactLynx（"基于 Lynx 的 React"）作为 Lynx 的初始前端框架风格进行开源，从而可以在 Lynx 上实现组件化、声明式的 UI。但是，Lynx 不仅限于 React。事实上，其他框架已经代表了 Lynx 大约一半的总体使用量，这表明了它在托管不同风格方面的中立性。随着现代应用程序变得越来越复杂，单个应用程序上有数十甚至数百名开发人员进行协作，Lynx 附带 Rspeedy，这是一个基于流行的基于 Rust 的 bundler Rspack 的工具链，以实现快速构建，并为通过 模块联邦 实现多框架 微前端 的未来铺平道路。我们渴望与开源 JavaScript 框架社区合作，为跨平台开发带来更大的多样性。

Lynx 的 核心引擎 不仅与框架无关，而且与宿主平台和渲染后端无关。从 Chromium、Flutter 和 React Native 等一系列项目中汲取灵感，它旨在适应新的平台基元，并且足够灵活，可以切换到 自定义渲染器，从而可以在具有图形界面的任何平台上实现像素完美的、一致的渲染。借助 Lynx for Web，Lynx 甚至可以在 Web 浏览器中以原生方式运行。它们共同为 Lynx 提供了极大的灵活性，使其能够扩展到更多的平台，如桌面、电视或 IoT 设备。

这不是结束，而是一个新的开始#

Lynx 是 生产就绪的，并且已经为数量惊人的企业提供支持。我们今天开源的版本正是我们在生产中使用的版本，这就是为什么它从 3.x 版本开始的原因。它甚至包括我们打算弃用的遗留代码和 API，但我们相信开源我们实际依赖的东西。事实上，我们正在将所有开发转移到 GitHub，使其对社区开放和透明。

此版本仅标志着一个开始。我们今天开源的 不是 所有东西。我们引以为傲的许多外围设备 - 包括额外的 UI 组件、高级内置图形功能、自定义渲染器和其他框架 - 尚未发布。

更重要的是，这是旅程的开始，因为作为一个在开源领域相对年轻的团队，我们知道我们有很多关于与社区合作、协作和成长的地方需要学习。但我们很高兴迈出这一步，因为我们相信开源是前进的正确道路 - 为了促进协作，突破跨平台开发中可能实现的界限，并回馈给予我们如此之多的社区。我们邀请您加入我们这段激动人心的旅程，并欢迎您的反馈和贡献。

您将使用 Lynx 构建什么？

lynx-unlock-native-for-more 📝 在 GitHub 上编辑此页面 上一页Lynx Blog ON THIS PAGE

除非另有说明，否则此作品已获得 Creative Commons Attribution 4.0 International License 的许可，并且代码示例已获得 Apache License 2.0 的许可。