技术背景

Taro Native是京东自研的跨网站移动应用开发框架。支持鸿蒙、iOS、Android三端应用开发，实现一次开发、多端部署。因为秒送业务功能持续 在华为鸿蒙低端机型上出现严重滑动卡顿。直接影响使用者体验——使用者在滑动时感到卡顿、掉帧，导致留存率下降和转化率受挫。该页面单张卡片包含100+个元素，渲染耗时显著，其他端亦存在体验下降。说起来，本次调整主要针对鸿蒙端，通过性能分析与调优让使用者用起来更舒服。

性能分析

页面构成

• 至于外层容器，WaterFlow 实现瀑布流列表
• 单元项： 每个FlowItem 承载一张商家卡片。按理说，
• 卡片建立： TML 模板 → CAPI 创建 Node Tree → 挂载至 ArkTS 侧 NodeContent

卡片渲染流程

1. 1. <<<<<<>>>

从上面流程中可以观察到。滑动卡顿的根源在于 主线程过载;应聚焦阶段<;&  ‍  & ℕ  &  &;&

Let me rewrite it clearly:

: 主线程过载是导致滑动卡顿的主要原因；需要在此阶段进行深入调整。

瓶颈定位

阶段1: ^{&iarrast;iarrast，iarrast;}* FlowItem 预加载耗时 24ms，* 各区分别耗时 A 15ms、* B 3ms、* C 6ms* * A 区* &iarrast;iarrast，iarrast;A 区 是 Repeat组件从复用池获取可复用组件更新数据，*导致组件内部状态变更并触发依赖变更。话说回来，* * B 区 *&iarrast;iarrast，B 区 &iarrast;图片组件创建图片并加载图片内容。* * C 区 *&iarrast;C 区 &iarrast;节点进行测量布局，* * &) ")，)*

阶段4: ^&iarrast;* 命令消费主要集中在Image / Text节点的创建和属性设置* * &) * )*

阶段5:* *Card 节点中存在大量 Stack / Image / Text节点，*递归测量布局开销巨大* **主要问题归纳**:* • **冗余测量布局**: FlowItem 预加载时已进行一次旧内容测量 render线程完成 yoga 测量后程序在 OnVSync 全量测量。• **Repeat复用**: 复用链路分散在多阶段。单次耗时虽不长，*但累积效应明显*，需结合鸿蒙程序源码进一步拆解。---

说到方案一，节点树静态布局&拦截程序测量布局

设计思路