Lynx：来自字节跳动的高性能跨端框架

2021 年 12 月 9 日 InfoQ

编辑｜邓艳琴

嘉宾｜师绍琨

在跨端技术高速演进的背景下，字节跳动自研了 Lynx 高性能跨端解决方案，它是一个在保持业务开发高效性上，利用极致的优化手段解决页面展示、交互性能问题，并拓展和满足更多跨平台框架的使用场景，期望实现真正的“跨平台”的高性能跨端框架。目前，Lynx 已经在包含抖音、头条、火山、西瓜在内的 10 多个字节内部 App，数十条产品线中落地，场景涵盖了卡片模式、半屏页等场景、页面模式、独立 App 等。

那么，与其他主流跨端框架相比，Lynx 有哪些特点？落地的时候有哪些挑战？为帮助大家更好理解 Lynx，近日，InfoQ 采访了抖音搜索业务前端负责人师绍琨，他即将在 GMTC 全球大前端技术大会（深圳站）2021 分享 Lynx 框架的高性能原理以及在抖音搜索场景中的应用优化手段，这也是 Lynx 在业界的首次亮相。以下为采访实录。

1 跨端框架众多，为何字节要自研 Lynx

InfoQ：可否简单介绍下 Lynx 的诞生背景？为什么字节选择自研一个新的跨端框架呢？

师绍琨：初期，我们调研了业界给予前端技术栈的跨端框架，React Native / React Web / 小程序，都是基于 React/ 小程序框架的视图的更新操作，均依赖于 JS，且首屏的速度极大依赖于 JS 执行速度。整体设计偏向应用型设计，内存、性能开销大。另一方面，虽然 SSR 服务端渲染，首屏速度极快，但后续视图更新工作和性能仍然受限于 JS 逻辑执行。SSR 需要在服务端根据数据提前渲染出对应的 html 下发给客户端，服务器承受比较大的压力。

初期，业务在嵌入式视图场景等性能要求较高的场景中有非常明确的诉求（由于嵌入在 Native 视图中，对视图动态展示性能的要求较高），以上两种渲染方式在数据渲染视图的性能、内存上表现都不够好，容易出现白屏或闪现的表现，基于这些背景开始探索高性能跨平台解决方案 Lynx。

InfoQ：所以 Lynx 项目大概是什么时候开始做的？为什么选择这个时候在业界亮相？

师绍琨：我们是在 2019 年年初开始着手调研和搭建 Lynx 框架的，经历了在业务落地验证、优化的阶段，不断从各个方向对性能做优化。这次主要是分享 Lynx 框架在业务场景的落地、优化，目前推广的计划还是要看后续的规划。

2 Lynx 与其他主流跨端框架的差异

InfoQ：能给我们简单讲讲 Lynx 的原理吗？

师绍琨：我们将带有数据、脚本、视图结构和指令的模板交给 Lynx ，通过 Template Assembler 将模板生成一系列用于生成视图的指令并执行，完成数据更新视图的过程。同时通过反向绑定执行脚本，建立和业务逻辑的联系，保证业务逻辑的执行。

InfoQ：与其他主流跨端框架相比，Lynx 的差异性在哪里，主要侧重什么？

师绍琨：差异主要有以下 5 点——

首屏直出：RN 或 Weex 类型的跨平台框架是在 JS 运行时中去创建、更新 DOM 节点，js 虚拟机承担了大部分的工作。而 Lynx 是将 DOM 节点构建全部放在 Native 层，JS 运行的是业务逻辑、不阻塞 UI 展示，整体轻 JS 逻辑设计
精简流水线：基于以上的机制，可以做首屏模板渲染；Lynx 开发工具打包前端产物时会将前端模版代码和 Data 编译成一个模版指令（用于生成视图的指令）直接下发到 Native，类似 Snapshot，将一部分工作在打包期间做处理，提升性能；运行时再反向绑定执行的 JS 脚本，建立和前端框架的联系，保证前端业务逻辑的执行
性能优化手段多：DOM 树构建，数据驱动，排版引擎等全部在 C++ 层实现，有足够多的性能分析和优化手段；全新的 Radon Diff 算法，大幅提升 Diff DOM 树的效率；自研的排版引擎 Starlight，对 Flex 排版算法的优化，以及高效的 Linear Layout 排版算法支持等，大幅提升排版效率；多线程排版和渲染支持，在特定场景下可以极大提升性能等
轻量化：对比 Flutter，基于前端 DSL，入门门槛低，前端模板编译成特定的渲染引擎指令，运行期通过自研的渲染引擎虚拟机执行，产物足够轻量，性能足够高效；同时使用原生组件渲染，包体积非常小，接入成本极低。
场景通用：原生组件渲染，适用于卡片、嵌入、全页等多种场景

InfoQ：在做 Lynx 的时候，你们遇到的最大的挑战是什么？最后解决了吗？

师绍琨：主要是对嵌入式场景的各种优化，需要深入底层和运行时，通过各种手段对性能进行优化。目前 Lynx 通过各种优化手段，性能可以和客户端实现相差无几。同时，我们对于跨端的思考不止停留在嵌入式场景，多平台的支持也在逐步完善，目前全页场景、App 场景已经不断在业务场景落地，同时还在尝试其他平台的支持。

InfoQ：目前，Lynx 在字节的落地达到了什么规模？涵盖了哪些业务场景？

师绍琨：目前 Lynx 业务涉及 10+ 个字节内部 App，数十条产品线，在抖音、头条、火山、西瓜等都有业务落地，场景涵盖卡片模式、半屏页等场景、页面模式、独立 App 等。

3 未来计划

InfoQ：Lynx 还有哪些地方需要继续优化？

师绍琨：主要为以下几个方面——