回答

在跨端技术高速演进的背景下，字节跳动自研了Lynx高性能跨端解决方案。Lynx旨在通过极致的优化手段解决页面展示和交互性能问题，并拓展和满足更多跨平台框架的使用场景，期望实现真正的“跨平台”高性能跨端框架。

目前，Lynx已经在包括抖音、头条、火山、西瓜在内的10多个字节内部App，数十条产品线中落地，涵盖了卡片模式、半屏页、页面模式、独立App等场景。

1. 为什么字节要自研Lynx

Lynx的诞生背景

字节跳动选择自研Lynx的原因在于现有的跨端框架（如React Native、React Web、小程序）在某些性能要求较高的场景中表现不佳。

这些框架依赖于JavaScript执行视图更新操作，首屏速度和性能开销较大，容易出现白屏或闪现的问题。为了满足嵌入式视图场景等高性能需求，字节跳动开始探索高性能跨平台解决方案Lynx。

项目启动时间

Lynx项目于2019年年初启动，经历了业务落地验证和多次性能优化。此次分享是为了展示Lynx在业务场景中的实际应用和优化手段。

2. Lynx与HTML5的差异

Lynx的原理

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

Lynx的差异性

Lynx与HTML5的主要差异在于以下几点：

首屏直出：

HTML5：HTML5页面通常通过JavaScript在客户端生成和更新DOM节点，首屏速度极大依赖于JavaScript的执行速度。

Lynx：Lynx将DOM节点构建全部放在Native层，JavaScript仅负责业务逻辑，不阻塞UI展示，整体设计更加轻量，提升了首屏渲染速度。

精简流水线：

HTML5：HTML5页面的渲染和更新流程较为复杂，涉及多个步骤和依赖。

Lynx：Lynx在开发工具打包前端产物时，将前端模板代码和数据编译成模板指令，直接下发到Native层，类似Snapshot，将部分工作在打包期间处理，提升了运行时性能。

性能优化手段：

HTML5：HTML5的性能优化手段主要依赖于JavaScript和浏览器的性能优化，如DOM优化、JavaScript引擎优化等。

Lynx：Lynx在C++层实现了DOM树构建、数据驱动和排版引擎，提供了更多的性能分析和优化手段，如全新的Radon Diff算法、自研排版引擎Starlight、多线程排版和渲染支持等，大幅提升了性能。

轻量化：

HTML5：HTML5页面通常包含大量的JavaScript和CSS文件，页面加载和渲染时间较长，包体积较大。

Lynx：Lynx基于前端DSL，前端模板编译成特定的渲染引擎指令，运行期通过自研的渲染引擎虚拟机执行，产物轻量，性能高效，同时使用原生组件渲染，包体积非常小，接入成本低。

场景通用：

HTML5：HTML5页面主要适用于Web浏览器和移动设备上的WebView，适用场景较为单一。

Lynx：Lynx支持原生组件渲染，适用于卡片、嵌入、全页等多种场景，覆盖面更广。