京东 Taro Native 框架静态布局直渲提速

设计思路

利用 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

ArkUI_NumberValue number[] = {0.0, 0.0,0.0, 0.0};ArkUI_AttributeItem item = {number, 4};number[0].i32 = (int32_t)std::floor(vp2PX(left));number[1].i32 = (int32_t)std::floor(vp2PX(top));number[2].i32 = (int32_t)std::floor(vp2PX(width));number[3].i32 = (int32_t)std::floor(vp2PX(height));ArkUI_NativeNodeAPI_1::Instance().setAttribute(nodeHandle, NODE_LAYOUT_RECT, &item);

2. 根节点升级为 CustomNode 并注册拦截

CAPI创建Node Tree的根节点StackNode替换成CustomNode，注册自定义测量布局函数，拦截系统对NodeTree的递归测量布局。

// 注册自定义事件监听接口voidCustomNode::EnableLayoutInterception(){    ArkUI_NativeNodeAPI_1::Instance().addNodeCustomEventReceiver(nodeHandle, OnStaticCustomEvent);    ArkUI_NativeNodeAPI_1::Instance().registerNodeCustomEvent(nodeHandle, ARKUI_NODE_CUSTOM_EVENT_ON_MEASURE, 0, this);    ArkUI_NativeNodeAPI_1::Instance().registerNodeCustomEvent(nodeHandle, ARKUI_NODE_CUSTOM_EVENT_ON_LAYOUT, 0, this);}// 移除自定义事件监听接口voidCustomNode::DisableLayoutInterception(){    ArkUI_NativeNodeAPI_1::Instance().removeNodeCustomEventReceiver(nodeHandle, OnStaticCustomEvent);    ArkUI_NativeNodeAPI_1::Instance().unregisterNodeCustomEvent(nodeHandle, ARKUI_NODE_CUSTOM_EVENT_ON_MEASURE);    ArkUI_NativeNodeAPI_1::Instance().unregisterNodeCustomEvent(nodeHandle, ARKUI_NODE_CUSTOM_EVENT_ON_LAYOUT);}// 系统测量布局事件处理voidCustomNode::OnStaticCustomEvent(ArkUI_NodeCustomEvent *event){    auto customNode = (CustomNode *) OH_ArkUI_NodeCustomEvent_GetUserData(event);    auto type = OH_ArkUI_NodeCustomEvent_GetEventType(event);    switch (type) {        case ARKUI_NODE_CUSTOM_EVENT_ON_MEASURE:            customNode->OnMeasure(event);            break;        case ARKUI_NODE_CUSTOM_EVENT_ON_LAYOUT:            customNode->OnLayout(event);            break;        default:            break;    }}// 自定义测量voidCustomNode::OnMeasure(ArkUI_NodeCustomEvent *event){    const ArkUI_AttributeItem *item = ArkUI_NativeNodeAPI_1::Instance().getAttribute(nodeHandle, NODE_LAYOUT_RECT);    ArkUI_NativeNodeAPI_1::Instance().setMeasuredSize(nodeHandle, item->value[2].i32, item->value[3].i32);}// 自定义布局voidCustomNode::OnLayout(ArkUI_NodeCustomEvent *event){ }

优化机制：CustomNode自定义测量布局函数，拦截了系统对CAPI创建NodeTree的递归测量布局；设置节点的NODE_LAYOUT_RECT可以直接用于后续的绘制渲染。

边界场景与应对

优化效果

原文本测量布局瓶颈分析

经过方案一优化后，系统仍会在主线程执行文本测量布局。我们梳理了文本节点的创建与属性设置流程，发现文本测量依赖于 ArkGraphics 2D 自研文本引擎〔1〕，用于处理复杂文本显示场景。该测量过程目前分布在两个阶段：

优化策略

将文本测量完全前移至 render 线程，并在该阶段缓存 ArkUI_StyledString 结果；主线程仅消费缓存值，不再重复测量。

实施步骤

1. Render 线程测量并缓存 StyledString

TextStyledString measureTextWithStyledString1(MeasureInfo measureInfo){    // 1.创建 TextStyle：设置FontSize、FontHeight、FontWeight、Overflow、FontFamilies、FontStyle、Color、Decoration    OH_Drawing_TextStyle* textStyle = OH_Drawing_CreateTextStyle();
    // 2.创建 TypographyStyle：设置MaxLines、ellipsis overflow、TEXT_ALIGN    OH_Drawing_TypographyStyle* typographyStyle = OH_Drawing_CreateTypographyStyle();
    // 创建 StyledString    OH_Drawing_FontCollection* fontCollection = GetFontCollection();    ArkUI_StyledString* styledString = OH_ArkUI_StyledString_Create(typographyStyle, fontCollection);
    // 添加文本    OH_ArkUI_StyledString_PushTextStyle(styledString, textStyle);    OH_ArkUI_StyledString_AddText(styledString, measureInfo.text.c_str());    OH_ArkUI_StyledString_PopTextStyle(styledString);
    // TextStyle 在添加文本后不再需要，直接销毁    OH_Drawing_DestroyTextStyle(textStyle);
    // 创建 Typography 并布局    OH_Drawing_Typography* typography = OH_ArkUI_StyledString_CreateTypography(styledString);    OH_Drawing_TypographyLayout(typography, vp2Px(measureInfo.maxWidth));
    // 获取测量结果    size_t lineCount = OH_Drawing_TypographyGetLineCount(typography);    double height = px2Vp(OH_Drawing_TypographyGetHeight(typography));    double width = px2Vp(ceil(OH_Drawing_TypographyGetLongestLine(typography)));
    // 返回字体styledString    return TextStyledString(typographyStyle, typography, styledString);}

2. 主线程直接应用缓存

if(cachedStyledString_.IsValid()) {    ArkUI_NativeNodeAPI_1::Instance().resetAttribute(nodeHandle, NODE_TEXT_CONTENT_WITH_STYLED_STRING);    ArkUI_AttributeItem content = { .object = static_cast<void*>(cachedStyledString_.GetStyledString()) };    ArkUI_NativeNodeAPI_1::Instance().setAttribute(nodeHandle, NODE_TEXT_CONTENT_WITH_STYLED_STRING, &content);}

收益评估

•主线程耗时降低：≈ 4 ms+

•线程负载均衡：减轻主线程压力，提升帧稳定性

•一致性保障：同一文本仅测量一次，避免多线程结果差异

方法论沉淀

本次实践形成了一套适用于“类 RN 架构”的通用提速范式——《类 RN 静态布局直渲提速》：

1.前置测量：在 render 线程完成布局计算

2.结果直通：通过 NODE_LAYOUT_RECT 将尺寸与位置一次性注入节点

3.拦截去重：借助 CustomNode 拦截系统重复测量

4.资源复用：对文本等资源建立跨线程缓存

该方法可横向迁移至其他产品的同构框架，显著提升低端设备渲染性能。

特别感谢 华为 2012 鸿蒙突击队 在本次问题联合攻关中的深度支持与协同分析。