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

编辑｜邓艳琴

嘉宾｜师绍琨

在跨端技术高速演进的背景下，字节跳动自研了 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 还有哪些地方需要继续优化？

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

• 不断完善技术文档和社区建设，持续提升开发者体验
• 性能持续优化，多线程渲染等能力进一步完善，给更复杂的页面场景提供优化手段
• 渲染能力补充和优化，CSS 属性的持续丰富，动画能力补强，保障多端
• 持续保障稳定性，不断完善基础 Case 和特定机型 Bad Case 的覆盖

InfoQ：会有开源计划吗？

师绍琨：目前开源计划还未定，看后续的发展；可以肯定的是会优先服务好内部业务，并持续打磨 Lynx SDK 的自身能力，提升开发者体验为主，在字节内部做开源生态，等到合适的时候会考虑开源。

嘉宾简介：

师绍琨，毕业于南开大学，现任抖音搜索业务前端负责人。目前在抖音基础业务团队负责搜索业务研发以及搜索大前端技术方向的规划演进，在跨端技术、大前端稳定性等方向有较丰富的经验。