2025 年 7 月 11 日

#Lynx Web 平台简介

王浩阳

软件工程师

艾浩

软件工程师

#Lynx 无处不在

借助 Lynx，我们为开发者提供一流的浏览器支持。

Lynx Web 平台现已进入 Beta 阶段。下面是一些平台亮点。

在 TikTok 内部已有诸多落地场景。这里给出一个简单示例。

我们的 Web 平台——面向浏览器的 Lynx FFI 实现——在渲染与表现上与 Lynx 引擎保持一致。

#并发能力：来自 Lynx 的启发

在 Lynx Web 平台上，我们将 Lynx 的双线程模型带到 Web 社区。

我们希望向 Web 社区展示多线程 Web 应用的样貌。 基于 Lynx 的双线程架构，我们利用 Web Workers 实现 Lynx 的多线程渲染。 在 Lynx Web 平台上，开发者可以轻松将 ReactLynx 页面渲染到 HTML 文档中。 使用 ReactLynx，你的代码会被自动且优雅地拆分为两个线程。 得益于更快的 FMP（First Meaningful Paint，首次有效绘制）以及非阻塞的 effect 执行，我们帮助你的内容尽快抓住用户的注意力。

众所周知，过去十年里，多线程性能在现代硬件上的提升速度已超过单线程性能。 在单线程模型中，应用只能顺序处理任务。 一旦遇到计算密集型场景，界面可能无响应甚至卡死，严重影响用户体验。

下面这个示例展示了：即便有复杂的特效，也不会阻塞主线程。

ReactLynx	React

在该示例中，我们模拟了一个需要用 JavaScript 解码 HEIC 图片的场景。 解码属于 CPU 密集型任务。即使将解码逻辑放入 useEffect，主线程仍会被占用。 这会导致 CSS 动画出现卡顿。 在 Lynx 中，effects 不会等待渲染结束，也不会阻塞渲染。 这种设计会优先保障高优先级的渲染任务，同时让 effects 得以快速执行。

#一套代码，一个 Lynx

我们的 Web 平台核心目标是：以尽可能低的成本，让开发者在浏览器中以高性能渲染 Lynx 页面。

因此，我们在浏览器端提供了 Lynx 引擎 API 的实现。

// lynx/runtime/papi.ts
const __SetAttribute: SetAttributePAPI = (
  element,
  key,
  value,
) => {
  if (value == null) {
    element.removeAttribute(key)
  } else {
    element.setAttribute(key, value + '')
  }
};

RENDERER_FUNCTION_CC(FiberSetAttribute) {
  CONVERT_ARG_AND_CHECK_FOR_ELEMENT_API(arg0, 0, RefCounted, FiberSetAttribute);
  auto element = fml::static_ref_ptr_cast<FiberElement>(arg0->RefCounted());
  CONVERT_ARG(arg1, 1);
  CONVERT_ARG(arg2, 2);
  auto string_type = arg1->StringView();
  CHECK_ILLEGAL_ATTRIBUTE_CONFIG(element, FiberSetAttribute);
  element->SetAttribute(arg1->String(), arg2->ToLepusValue());
  ON_NODE_MODIFIED(element);
  RETURN_UNDEFINED();
}

这意味着开发者与 Rspeedy（Rsbuild）插件作者无需为 Web 平台做额外适配。 你的代码无需针对不同平台维护多套变体。 唯一的差异在于：面向 Web 平台的产物会跳过 AOT 优化。 One Lynx!

#同一份 CSS 规范 —— Web CSS 规范

对于大多数 Lynx 支持的 CSS 属性以及全部选择器，Lynx 引擎遵循 W3C 规范或其子集。 这使我们可以将这些声明原样输出到文档中。

当然，也有一些为性能而生的属性与取值。 因此，Web 平台内置了一个 CSS 转换器，会将某些取值转换为 CSS 自定义属性； 随后再通过一些 CSS 技巧在 HTML 元素上切换与应用不同的属性。 这让我们在保持高性能的同时，实现最大化的兼容性。

#原生组件，Web Components

https://lynxjs.org/zh/guide/ui/elements-components.html

Lynx 的一个核心理念是：基于原生 UI 组件进行渲染。这意味着在每个平台上，我们都会提供一组行为相近的 UI 组件实现。 就像 iOS/Android 上的 Lynx 元素一样，在浏览器中我们提供了一系列基于 Web Components 的自定义元素。 借助浏览器原生提供的生命周期，我们无需依赖任何 JavaScript 框架。这有助于将 I/O 开销降至最低。

#更快，更易，用 Rust 驱动的未来

#由 Rust 与 WebAssembly 驱动

我们正在引入一个由 Rust 实现的 WebAssembly 模块。内部基准测试显示：将样式转换器用 Rust 重写后，渲染时间可降低约 30–40%。

#已为 PWA 做好准备

我们将进一步探索 PWA 技术（如推送通知与 Service Worker），以提升用户体验。 想象一下：无需单独的 SSR 服务器，也能实现非阻塞的内容流式输出。让我们用 workers 把它变为现实！

#SSR 支持

我们深知 SSR 是提升用户体验的重要方式。Web 平台将提供内置的「零 JavaScript 可就绪」SSR 输出，并与基于 HTML template 元素 的方案集成。

#观看我们在 React Universe Conf 2025 的演讲

React Universe Conf 2025

#立即与你的 Web 应用集成

了解更多

#当前状态

我们仍处于密集开发阶段——团队正持续打磨并扩展平台能力。 因此，仍有少数能力在排期中，尚未完全落地。例如，热更新（HMR）正在积极开发，尚未对外发布。我们也会持续改进，尽快与大家见面。