我是兰瓶Coding，一枚刚踏入鸿蒙领域的转型小白，原是移动开发中级，如下是我学习笔记《零基础学鸿蒙》，若对你所有帮助，还请不吝啬的给个大大的赞~

前言

目标：提供一套可落地的“分层定位 → 压测复现 → 参数调优 → 回收与池化”方法论，覆盖动画与滚动两大高频场景。在 60fps（16.6ms/帧）预算下，将 布局/绘制/合成 各阶段瓶颈拆分并给出对策与指标基线。

1 渲染管线与预算

Pipeline 粗分（按典型先后顺序）：

1. 输入/脚本：事件分发、手势回调、动画驱动（显式/隐式）。
2. 布局/测量（Layout/Measure）：树遍历、尺寸计算、重排（Reflow）。
3. 绘制（Paint/Record）：形状/文本/位图记录与光栅化；CustomDraw/Canvas。
4. 合成（Composite）：图层合成、透明混合、离屏/遮罩；提交到合成器。
5. 显示（Present）：vsync 对齐与呈现。

帧预算：目标 60fps ⇒ 16.6ms；建议 P50 < 10ms、P95 < 16.6ms、P99 < 24ms。

2 丢帧分层定位：判别树

先用“是否在动画/滚动时才卡？”与“是否随内容复杂度线性变慢？”二问锁定方向，再进入子检查。

2.1 布局瓶颈（Layout-bound）

• 信号：

  • 小改动导致大范围重排；
  • 节点数/嵌套层级增加，帧时近似线性上升；
  • 动画期间修改宽高/字体/约束，引发级联测量。

• 对策：

  • 动画只动 transform/opacity；
  • 约束收敛：减少 wrap-content/依赖链；
  • 大列表采用 虚拟化/分区测量；
  • 复用测量结果（缓存 intrinsic size），减少二次测量。

2.2 绘制瓶颈（Paint-bound）

• 信号：

  • Canvas 中每帧路径/文本重排；
  • 阴影/模糊/大面积半透明叠加；
  • 分辨率升高或缩放导致像素级填充暴增。

• 对策：

  • 预构建 Path/Gradient/Image，脏区重绘；
  • 折叠半透明层，避免实时模糊/阴影；
  • 纹理复用/图集化，避免频繁上传；
  • 优先在合成层上移动容器，Canvas 图形保持静态。

2.3 合成瓶颈（Composite-bound）

• 信号：

  • 图层数/透明叠加多，合成阶段帧时飙升；
  • 大纹理（单边 ≥ 4K）/离屏渲染频繁；
  • 滚动有撕裂/卡顿但脚本与绘制都不高。

• 对策：

  • 图层扁平化，合并装饰；
  • 控制纹理尺寸与离屏次数（遮罩/圆角谨慎）；
  • 避免连续半透明叠加；必要时降分/分块。

3 高频手势管线压测

3.1 压测场景矩阵

• 滚动：长列表（图文混排/不同 item 高度/占位图 → 实图替换）。
• 拖拽/滑动面板：弹簧/减速续动 + 动态阴影/模糊（用于暴露瓶颈）。
• 缩放/旋转：多指手势 + 高分辨率图片。

3.2 驱动与节流范式

// 每帧一次即可，避免微包风暴
const onPan = throttle((dx) => ctrl.setValue(clamp(start + dx/width, 0, 1)), 16)
const onEnd = (v) => {
  ctrl.setSpring({ stiffness: 260, damping: 28, initialVelocity: v })
  ctrl.playTo(snap(ctrl.value))
}

• 输入合帧：将多点/高频事件按帧合并。
• 显式控制：手势期间 setValue()，结束后速度继承进入弹簧/减速动画。

3.3 压测指标

• 帧时 P50/P95/P99；丢帧率（Jank）；
• 输入→呈现延迟（手势响应时延）；
• 滚动期间图片解码/上传次数；
• CPU/GPU 平均与峰值；温度/功耗曲线。

4 布局/绘制/合成的细化调参

4.1 布局调参

• 降低嵌套：使用 扁平化容器；
• 列表：预测量 + 复用（池化 item）；
• 条件渲染：visibility 而非增删节点；
• 动画属性选择：禁止在动画中改 width/height/font；
• 断点布局：窄屏/宽屏独立布局，减少复杂约束计算。

4.2 绘制调参

• 脏区：维护 dirtyRect，只重绘变化区域；
• 缓存：静态网格/坐标轴/路径缓存成 Picture；
• 文本：只在内容变化时重排，启用字形缓存；
• 抗锯齿/阴影/模糊：谨慎开启，避免每帧参数变化。

4.3 合成调参

• 控制图层数量与透明度堆叠；
• 大图平移优先 transform，避免重采样；
• 通知/对话框优先使用系统合成能力，减少离屏。

5 回收策略与池化

5.1 资源回收

• 图片/纹理：LRU + 分层阈值（热区/冷区）；
• 释放时机：不可见 → 标记可回收；后台/锁屏 → 强制降级缓存；
• 大对象（Path/Gradient/Shader）复用，避免频繁 GC。

5.2 对象池化

class ObjectPool<T> {
  private pool: T[] = []
  constructor(private factory: ()=>T, private max=64) {}
  acquire(): T { return this.pool.pop() ?? this.factory() }
  release(obj: T) { if (this.pool.length < this.max) this.pool.push(obj) }
}
// 用于点/路径/事件包/解码缓冲等临时对象

• 池大小：按峰值 - 均值的 1~2 倍；
• 热启动：首屏预热 N 个对象，减少抖动；
• 零拷贝：尽量在池中复用 buffer，避免中间拷贝。

5.3 图片与解码

• 先占位后替换：缩略图优先，滚动稳定后再解码大图；
• 限速并发：并行解码/上传不超过 CPU/GPU 并行度；
• 复用纹理：图集/九宫格切片复合，减少绑定切换。

6 诊断与自动化

6.1 采样与打点

• 帧时与阶段占比：输入/脚本、布局、绘制、合成；
• 事件：scroll_start/scroll_end/settle_start/settle_end；
• 资源：解码/纹理上传次数与耗时。

6.2 Jank Tracer（伪代码）

onFrameDone(ts):
  dt = ts - last
  record(dt)
  if dt > 24ms: markJank(ts, stage=dominant())
flushEvery(1s): report(p50,p95,p99,jankRate,topStage)

6.3 自动回归与门禁

• 构建 固定场景脚本：长列表滚动 30s、缩放图片 10s、面板拖拽 20 次；
• 门禁阈值：P95 帧时 +10% 或 Jank 率 +1pp 判失败；
• 产出 火焰图/阶段堆叠图 便于定位。

7 目标与验收

• 动画：P95 帧时 < 16.6ms，Jank < 2%；
• 滚动：平均帧时 < 12ms，首屏稳定时间 < 500ms；
• 图片列表：滚动期间解码并发 ≤ 核心数；纹理上传均摊 < 1 次/帧；
• 功耗：滚动 60s 的电量消耗较基线增长 < 0.5%。

8 快速检查清单（Cheat Sheet）

• 动画只动 transform/opacity，批量提交；
• 手势 onUpdate 节流至 ~16ms；onEnd 去抖并速度继承；
• 列表虚拟化 + 预测量 + 复用；
• Canvas 只重绘脏区，Path/Image 缓存；
• 控制合成层数量与透明叠加，避免大纹理与离屏；
• LRU 缓存 + 对象池，后台/锁屏降级缓存；
• 自动压测脚本与门禁阈值接入 CI。

…

(未完待续)