字节跨平台框架 Lynx 开源:一个 Web 开发者的原生体验

最近各大厂都在开源自己的跨平台框架，前脚腾讯刚宣布计划四月开源基于 Kotlin 的跨平台框架 「Kuikly」 ，后脚字节跳动旧开源了他们的跨平台框架「 Lynx」，如果说 Kuikly 是一个面向客户端的全平台框架，那么 Lynx 就是一个完全面向 Web 前端的跨平台全家桶。

为什么这么说？我们简单看官方提供的一个 Demo ，相信你可以看到许多熟悉的身影：

• scss
• React
• useEffect
• react native 的 view

import "../index.scss";
import { useEffect, useMainThreadRef, useRef } from "@lynx-js/react";
import { MainThread, type ScrollEvent } from "@lynx-js/types";
import type { NodesRef } from "@lynx-js/types";
import LikeImageCard from "../Components/LikeImageCard.jsx";
import type { Picture } from "../Pictures/furnitures/furnituresPictures.jsx";
import { calculateEstimatedSize } from "../utils.jsx";
import { NiceScrollbar, type NiceScrollbarRef } from "./NiceScrollbar.jsx";
import { adjustScrollbarMTS, NiceScrollbarMTS } from "./NiceScrollbarMTS.jsx";

export const Gallery = (props: { pictureData: Picture[] }) => {
  const { pictureData } = props;
  const scrollbarRef = useRef<NiceScrollbarRef>(null);
  const scrollbarMTSRef = useMainThreadRef<MainThread.Element>(null);
  const galleryRef = useRef<NodesRef>(null);

  const onScrollMTS = (event: ScrollEvent) => {
    "main thread";
    adjustScrollbarMTS(
      event.detail.scrollTop,
      event.detail.scrollHeight,
      scrollbarMTSRef,
    );
  };

  const onScroll = (event: ScrollEvent) => {
    scrollbarRef.current?.adjustScrollbar(
      event.detail.scrollTop,
      event.detail.scrollHeight,
    );
  };

  useEffect(() => {
    galleryRef.current
      ?.invoke({
        method: "autoScroll",
        params: {
          rate: "60",
          start: true,
        },
      })
      .exec();
  }, []);

  return (
    <view className="gallery-wrapper">
      <NiceScrollbar ref={scrollbarRef} />
      <NiceScrollbarMTS main-thread:ref={scrollbarMTSRef} />
      <list
        ref={galleryRef}
        className="list"
        list-type="waterfall"
        column-count={2}
        scroll-orientation="vertical"
        custom-list-name="list-container"
        bindscroll={onScroll}
        main-thread:bindscroll={onScrollMTS}
      >
        {pictureData.map((picture: Picture, index: number) => (
          <list-item
            estimated-main-axis-size-px={calculateEstimatedSize(picture.width, picture.height)}
            item-key={"" + index}
            key={"" + index}
          >
            <LikeImageCard picture={picture} />
          </list-item>
        ))}
      </list>
    </view>
  );
};

export default Gallery;

没错，目前 Lynx 开源的首个支持框架就是基于 React 的 ReactLynx，当然官方也表示Lynx 并不局限于 React，所以不排除后续还有 VueLynx 等其他框架支持，而 Lynx 作为核心引擎支持，其实并不绑定任何特定前端框架，只是当前你能用的暂时只有 ReactLynx ：

对于支持平台，目前开源版本支持 Android、iOS 和 Web，而 Lynx 官方也表示其实内部已经支持了鸿蒙平台，不过由于时间的关系，暂没有开放。

至于是否支持小程序，这个从设计上看其实应该并不会太困难。

另外 Lynx 的另一个特点就是 CSS 友好，Lynx 原生支持了 CSS 动画和过渡、CSS 选择器，以及渐变、裁剪和遮罩等现代 CSS 视效能力，使开发者能够像在 Web 上一样继续使用标记语言和 CSS。

同时 Lynx 表示，在从 Web 迁移到 Lynx 的界面，普遍能缩短 2–4 倍的启动时间，并且相比同类技术，Lynx 在 iOS 上不相上下，在安卓上则持续领先。

性能主要体现在自己特有的排版引擎、线程模型和更新机制。

而在实现上，源代码中的标签，会在运行时被 Lynx 引擎解析，翻译成用于渲染的 Element，嵌套的 Element 会组成的一棵树，从而构建出复杂的界面：

而 Lynx Element 是和平台无关的统一抽象支持，它们会被 Lynx 引擎渲染为原生平台的 UI 控件，比如 iOS 与 Android 中的 Native View，或 Web 中的 HTML 元素（包括 custom_elements），从目前的 Demo 直出 App 我们也可以看到这一点：

那看到这里，你是不是想说，这不就是 react-native 吗？这里有几个不同点：

• Lynx 默认在引擎层就支持 Web
• Lynx 有自己特有的线程模型和布局模型
• Lynx 在官方宣传中可以切换到自渲染，虽然暂时没找到

事实上，Lynx 官方并没有避讳从其他框架里学习相应优势的情况，官方就很大方的表示，Lynx 项目就是使用了 react-native 和 Flutter 的部分优势能力，从这一点看Lynx 还是相当真诚的：

react-native 不用说，比如 JSI 等概念都可以在项目内找到，而类似 Flutter 里的 buildroot 和 Runner 也可以在项目内看到，包含 Flutter 里的 message loop 等事件驱动的线程编程模型：

例如 Lynx 的 Virtual Thread 概念，对应 Lynx 托管的“执行线程” ，用于提供 Task 的顺序执行，并且它与物理线程可能存在不是一一对应的关系，这和 Flutter 的 Task Runners 概念基本一样，支持将 Task 发布上去执行，但不关心其线程模型情况。

另外 Lynx 最大的特点之一是「双线程架构」，JavaScript 代码会在「主线程」和「后台线程」两个线程上同时运行，并且两个线程使用了不同的 JavaScript 引擎作为其运行时：

• Lynx 主线程负责处理直接处理屏幕像素渲染的任务，包括：执行主线程脚本、处理布局和渲染图形等等，比如负责渲染初始界面和应用后续的 UI 更新，让用户能尽快看到第一屏内容。
• Lynx 的后台线程会运行完整的 React 运行时，处理的任务不直接影响屏幕像素的显示，包括在后台运行的脚本和任务(生命周期和其他副作用)，它们与主线程分开运行，这样可以让主线程专注于处理用户交互和渲染，从而提升整体性能。

比如下面这个代码，当组件 <HelloComponent/> 被渲染时，你可能会在控制台看到 "Hello" 被打印两次，因为代码运行在两个线程上：

const HelloComponent = () => {
  console.log('Hello'); // 这行会被打印两次
  return <text>Hello</text>;
};

在 Lynx 规则里，事件处理器、Effect、标注 background only、backgroundOnlyFunction 等只能运行在后台线程，因为后台线程才有完整的 React 运行时。

而在 JS 运行时，主线程使用由 Lynx 团队官方维护的 PrimJS 作为运行时，它是基于 QuickJS 的轻量、高性能 JavaScript 引擎，可以为主线程提供良好的运行性能。

而 Lynx 的后台线程：

• Android：出于包体积和性能的综合考量，默认使用 PrimJS 作为运行时
• iOS：默认情况下使用 JavaScriptCore 作为运行时，但由于调试协议支持度的原因，当需要调试的时候，需要切换到 PrimJS

同时 PrimJS 提供了一种高性能的 FFI 能力，可以较低成本的将 Lynx 对象封装为 JS 对象返回给 FFI 调用者，相比传统的 FFI 性能优势明显，但是这种类型的 JS 对象并不是 Object Model，Lynx 引擎无法给该对象绑定 setter getter 方法，只能提供 FFI 将其作为参数传入，实现类似的功能。

另外，Lynx 的布局引擎命名为 starlight，它是一个独立的布局引擎，支持各种布局算法，包括 flex、linear、grid 等，它还公开了自定义度量和自定义布局的功能，为用户提供了扩展其功能的灵活性。

在 Lynx 内部，LynxView 的作用类似于原生的 WebView，用于加载渲染对应 Bundle 文件，其中 LynxView 对应的就是 Page，Page 就是 Lynx App 的 Root Element。

客户端可以给 LynxView 设置不同的大小约束，也就是给 Page 设置大小约束，Lynx 排版引擎会使用这些约束来计算 Page 节点以及所有子节点的大小位置信息：

<page> 是页面的根节点，一个页面上只能有一个 <page>。你也可以不在页面最外层显式写 <page>，前端框架会默认生成根节点。

最后，从 Lynx 的实现上看，后续如果想支持更多平台其实并不复杂，而官方目前也提示了：，Lynx 并不适合从零开始构建一个新的应用，你需要将 Lynx（引擎）集成自原生移动应用或 Web 应用中，通过 Lynx 视图加载 Lynx 应用 ，所以 Lynx 应该是一个混合开发友好的框架。

那么，对于你来说，Lynx 会是你跨平台开发的选择之一吗？