自渲染跨端框架在字节跳动的实践与展望

1. 自渲染跨端框架在字节跳动的实践与展望刘国良字节跳动 – 客户端开发工程师

2. 目录 01 背景 02 实现原理 03 Android 同步渲染 04 业务应用 05 未来展望

3.

4. 背景

5. Lynx 介绍 01 前端友好支持小程序和 React 等多种 DSL；支持常用的 CSS 样式及布局模型 02 Lynx 03 高性能使用平台原生组件；C++ 数据驱动；支持首屏直出开发体验提供一系列工具来提升开发和调试体验，例如 VSCode 插件、远程调试、Web Playground、页面录制等

6. Lynx 示例

7. Lynx 解决的问题 Native • 多端投入，开发成本高 Lynx • 无动态更新能力 • 前端的开发体验 • 开发效率较低 • 接近 Native 的性能 • 跨 Android/iOS 平台 • 支持业务动态更新 • 高效支持卡片场景 Web • 性能和体验跟 Native 有差距 • 与 Native 互操作性低

8. Lynx 存在的问题性能跨平台一致性在电视盒子这样的低端设备上对跨平台需求场景扩展到了PC端/电大部分逻辑下沉到 C++，已经能性能有更高的要求视大屏/嵌入式设备等各种场景很大程度上解决跨端一致性的问题，但组件还是分端实现，仍然有较高的多端适配成本自渲染 • 更精简的 UI 框架 • 能以较低的成本支持新的平台 • Android 端减少 JNI 调用 • 功能特性天然跨平台 • Paragraph 复用 • 业务场景针对性优化 • 各端的能力与表现高度一致，降低业务适配、测试成本 • 不受平台 UI 框架限制，能更贴近 Web 端

9. 实现原理

10. 实现原理站在巨人的肩膀上 Engine 全平台支持渲染管线精简成熟稳定

11. 实现原理 Lynx 整体架构 Bundle Resources Parser JS Bridge Components Animation Android Customize ... DSL CSS Diff/NoDiff Components Painting iOS Layout Painting fml Android Tools UI Libs VM JS Framework Compositing Embedder iOS Windows Animation Skia macOS ...

12. 实现原理自渲染架构 view list text refresh-view Painting LynxModule fml image Animation DevTool Shell Android scroll-view svg lottie Gesture Monitor Flow iOS input video canvas FocusManager Log overlay … Resources Player Network Skia txt … Windows macOS ...

13. 实现原理渲染流程 Data change template data VDOM DOM API Animation element tree view tree render tree Raster Animation layer tree screen

14. 实现原理线程模型 Main Lynx 线程模型 Renderkit 线程模型 Tasm JS Data update Layout JS UI Platform Raster Diff Layout Patch Paint Rasterize UI Raster IO IO image SwapBuffer

15. 自渲染方案对比 Lynx 自渲染 Flutter Skyline 开发语言小程序/React Dart 小程序布局模型 W3C Custom W3C 布局性能中高中渲染引擎 Skia 渲染性能理论上相当包体积（Android） ~5M ~5M ? 动态更新支持不支持支持接入方式页面、卡片页面、应用页面、小程序

16. Android 同步渲染

17. 同步渲染背景 SurfaceView • 单独线程绘制，与原生渲染不同步，快速滑动会产生黑块/错乱 • 滑动过程中 Surface 会销毁重建，开销较大 TextureView • 与平台侧 View 一起上屏，但存在延迟，快速滑动会有空白 • 内存占用高渲染不同步内存占用高

18. 同步渲染 Android WebView 中的 Draw functor 机制 UI Thread Render Thread Input Animate Measure Layout Draw Sync ops Clip Fill Functor … Sync ops Optimize Execute Clip Fill Functor …

19. 同步渲染实现方案原 SurfaceView 模式 UI • 渲染不同步 • Surface 创建/销毁 • Buffer 内存占用 Draw Paint LayerTree 模式 UI Paint • 不支持裁剪绘制指令 Draw LayerTree Render Flush Raster Paint Raster • 额外的录制过程 • 无 GPU RasterCache • 不支持裁剪绘制指令 Draw Render Flush Functor Record Flush Functor Swap Raster Raster Swap SkPicture 模式 UI Render Swap SkPicture Swap Texture 模式 • 共享纹理机制复杂 • 额外的纹理内存 UI Paint Draw Render Raster Flush Functor Raster Texture Swap

20. 同步渲染效果 LayerTree 模式 Texture 模式 • 卡片场景下滑动不产生黑块 • 能支持 partial repaint 裁剪绘制指令 • 避免 Surface 创建/销毁耗时，首屏耗时减少约 20% • 由于多一个纹理保存绘制结果，内存收益会减少 • 减少 SurfaceView 双缓冲/三缓冲的内存占用（1080p 下减少 16~24M） • 由于不能裁剪绘制指令，动画性能有一定下降

21. 业务应用

22. 业务应用自渲染支持能力框架能力 • 继承绝大部分 Lynx 能力，例如 DSL、 NativeModule、 SelectorQuery 等组件 • 支持所有基本组件： view, image, text, scroll-view, swiper, … CSS • 支持大部分进阶组件：样式上支持绝大部分 Lynx 的 CSS 样式，但是 list, canvas, lottie, audio, video, … 可以做到多端渲染完全一致 • • • 布局上由于直接使用 Lynx 布局结果，所以目前与 Lynx 原生完全一致不存在多端逻辑不一致问题特有能力 • 支持鼠标、按键事件，支持焦点系统 • 扩展了一些桌面端使用的组件

23. 业务应用 Android TV 端应用鲜时光活动页鲜时光搜索页活动页相比 H5 版本首屏耗时降低 60%+，搜索页性能和业务数据与 Native 版本业务数据显著提升持平，赋予页面动态化能力

24. 业务应用桌面端应用剪映活动、发票、会员页 TikTok LIVE Studio 主界面嵌入在 QT 应用中，提高开发效率和开嵌入在 Electron 应用中，复用移动端发体验，提供动态化能力代码，提高一致性

25. 未来展望

26. 未来展望替换 Skia？ Skia 问题 • 包体积较大 • 历史包袱 • 着色器 Jank 问题自研引擎 or Impeller

27. 未来展望更多平台支持嵌入式 Linux XR 性能、内存面临更高的要求系统碎片化新的交互形态、3D 场景（WebGL/WebGPU）、高帧率低延时

28. 扫码回复「D2」获取第十七届 D2 演讲 PDF 材料后续也将推送 D2 会后技术文章，敬请关注！！

29. 感谢大家观看