京东 Taro Native 框架静态布局直渲提速
京东零售技术约 4 分钟01
性能分析
外层容器： WaterFlow实现瀑布流列表
单元项：每个 FlowItem承载一张商家卡片
NodeContent卡片渲染流程
1.页面滑动时，WaterFlow预加载H:Preload FlowItem，调用Repeat.GetFrameChildByIndex获取可复用组件并更新数据，投递解析任务到element线程。
2.element线程对TML业务代码进行解析并生成Virtual Dom、CSS Info、yoga渲染树，投递测量布局任务到render线程。
3.render线程基于yoga布局引擎对渲染树进行测量布局，同时生成节点创建、属性设置等命令，投递命令集合到主线程。
4.主线程分析命令，调用CAPI接口创建节点、设置属性、更新布局，并将根节点挂载到ArkUI的ContentNode。
5.主线程OnVsync时触发Node Tree的系统测量、布局后，发送给render_service渲染上屏。
从上面流程中可以观察到，滑动卡顿的根源在于主线程过载，应聚焦阶段1、4、5进行深入优化。
瓶颈定位
阶段1：FlowItem预加载耗时24ms，各区分别耗时A 15ms、B 3ms、C 6ms
A区——Repeat组件从复用池获取可复用组件更新数据，导致组件内部状态变更并触发依赖变更。
B区——图片组件创建图片并加载图片内容。
C区——卡片内所有节点进行测量布局。
阶段4：命令消费主要集中在Image / Text节点的创建和属性设置
阶段5：卡片节点中存在大量Stack / Image / Text节点，递归测量布局开销巨大
核心问题归纳：
1.冗余测量布局：FlowItem 预加载时已进行一次旧内容测量render 线程完成 yoga 测量后，系统在 OnVSync 再次全量测量。
2.Repeat复用：复用链路分散在多阶段，单次耗时虽不长，但累积效应明显需结合鸿蒙系统源码进一步拆解。
02
方案一：节点树静态布局&拦截系统测量布局
设计思路
利用 render 线程已完成的 yoga 测量结果，直接作为最终布局依据，跳过主线程 OnVSync 阶段的重复测量。
关键技术点
CustomNode 自定义
OnMeasure/OnLayout，拦截系统对 CAPI Node Tree 的递归测量使用
NODE_LAYOUT_RECT一次性设置四边位置与尺寸
实施步骤
1. 替换布局属性设置方式
设置Node Tree所有节点top、left、width、height时，由NODE_WIDTH、NODE_HEIGHT、NODE_POSITION改成NODE_LAYOUT_RECT
2. 根节点升级为 CustomNode 并注册拦截
CAPI创建Node Tree的根节点StackNode替换成CustomNode，注册自定义测量布局函数，拦截系统对NodeTree的递归测量布局。
优化机制：CustomNode自定义测量布局函数，拦截了系统对CAPI创建NodeTree的递归测量布局；设置节点的NODE_LAYOUT_RECT可以直接用于后续的绘制渲染。
边界场景与应对
优化效果
预加载阶段 C 区（文本测量布局）显著缩短
鸿蒙低端机平均帧率：43 fps → 57 fps，提升 ≈32.5%
03
方案二：复用字体测量布局缓存
原文本测量布局瓶颈分析
经过方案一优化后，系统仍会在主线程执行文本测量布局。我们梳理了文本节点的创建与属性设置流程，发现文本测量依赖于 ArkGraphics 2D 自研文本引擎〔1〕，用于处理复杂文本显示场景。该测量过程目前分布在两个阶段：
优化策略
将文本测量完全前移至 render 线程，并在该阶段缓存 ArkUI_StyledString 结果；主线程仅消费缓存值，不再重复测量。
实施步骤
1. Render 线程测量并缓存 StyledString
2. 主线程直接应用缓存
收益评估
主线程耗时降低：≈ 4 ms+
线程负载均衡：减轻主线程压力，提升帧稳定性
一致性保障：同一文本仅测量一次，避免多线程结果差异
04
总结与沉淀
方法论沉淀
本次实践形成了一套适用于“类 RN 架构”的通用提速范式——《类 RN 静态布局直渲提速》：
1.前置测量：在 render 线程完成布局计算
2.结果直通：通过 NODE_LAYOUT_RECT 将尺寸与位置一次性注入节点
3.拦截去重：借助 CustomNode 拦截系统重复测量
4.资源复用：对文本等资源建立跨线程缓存
该方法可横向迁移至其他产品的同构框架，显著提升低端设备渲染性能。
— END —
往期内容回顾
ICML 2026｜RTPrune：受两阶段阅读启发、面向 DeepSeek-OCR 高效推理的词元剪枝
SIGIR 2026｜语义 ID 也能“因材施教”：让生成式检索兼顾精准与泛化
WWW 2026 | 频谱解耦与增强：让多模态大模型学会“去噪提纯”
关注「京东零售技术」，了解更多～