标记渲染流水线

Lynx Pipeline 定义了从渲染触发到屏幕显示的完整流程。如果你关注某些关键组件的渲染性能，可以通过设置该组件的 __lynx_timing_flag 属性来标记其 Lynx Pipeline，从而监测性能表现。

当标记的 Lynx Pipeline 执行完成并刷新屏幕显示后，会生成一个 PipelineEntry 性能事件。你可以通过 PerformanceObserver 获取该事件。

使用规则

__lynx_timing_flag 属性必须为非空字符串。空值或非法类型将不会触发 PerformanceObserver 的回调。
当 __lynx_timing_flag 属性值为 __lynx_timing_actual_fmp 时，会额外生成 MetricActualFmpEntry 性能事件。

使用示例

标记节点：在目标组件上设置 __lynx_timing_flag 属性。当该节点完成渲染时，框架将自动采集其 Lynx Pipeline 的性能数据。
获取数据：通过 lynx.performance.createObserver() 注册观察者（PerformanceObserver），可以获取相关性能数据（PipelineEntry）。

注意事项

1. 多个组件设置相同的 `__lynx_timing_flag` 属性

export default function App() {
  const [showImage, setShowImage] = useState(false);

  useEffect(() => {
    setTimeout(() => {
      setShowImage(true);
    }, 3000);
  }, []);

  return (
    <view className="container">
      <text __lynx_timing_flag="__lynx_timing_actual_fmp">Hello World</text>
      {showImage && <image __lynx_timing_flag="__lynx_timing_actual_fmp" src="xxxx.png" />}
    </view>
  );
}

在这种情况下，仅会统计第一个上屏组件的 Lynx Pipeline 数据：

计算一次 ActualFMP 并发送一次 MetricActualFmpEntry。
发送一次 PipelineEntry。

如果希望统计两个组件都完成渲染的时机，可以使用不同的 __lynx_timing_flag。

2. 同一个组件多次渲染

export default function App(this: any) {
  return (
    <view className="container">
      {
         // needShow: true -> false -> true
         data.needShow ? <text __lynx_timing_flag="__lynx_timing_actual_fmp">{data.msg}</text> : null
      }
    </view>
  );
}

在这种情况下，仅统计该组件第一次上屏的 Lynx Pipeline 数据：

计算一次 ActualFMP 并发送一次 MetricActualFmpEntry。
发送一次 PipelineEntry。

如果希望统计每个组件的渲染性能，可以按如下方式实现：

let isFirst = true;
export default function App(this: any) {
  return (
    <view className="container">
      {
         // needShow: true -> false -> true
         data.needShow ? <text __lynx_timing_flag={"__lynx_timing_actual_fmp" + (isFirst ? "" : +data.id)}>{data.msg}</text> : null
      }
    </view>
  );
}

兼容性

LCD tables only load in the browser

#标记渲染流水线

#使用规则

#使用示例

#注意事项

#1. 多个组件设置相同的 __lynx_timing_flag 属性

#2. 同一个组件多次渲染