在跨端技术高速演进的背景下,字节跳动自研了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支持原生组件渲染,适用于卡片、嵌入、全页等多种场景,覆盖面更广。网友回复
python如何实现torrent的服务端进行文件分发p2p下载?
如何在浏览器中录制摄像头和麦克风数据为mp4视频保存下载本地?
go如何编写一个类似docker的linux的虚拟容器?
python如何写一个bittorrent的种子下载客户端?
ai能通过看一个网页的交互过程视频自主模仿复制网页编写代码吗?
ai先写功能代码通过chrome mcp来进行测试功能最后ai美化页面这个流程能行吗?
vue在手机端上下拖拽元素的时候如何禁止父元素及body的滚动导致无法拖拽完成?
使用tailwindcss如何去掉响应式自适应?
有没有直接在浏览器中运行的离线linux系统?
nginx如何保留post或get数据进行url重定向?