#Mark Rendering Pipelines

Lynx Pipeline defines the complete process from triggering the rendering to displaying it on the screen. If you care about rendering performance of certain key components, you can set the component’s __lynx_timing_flag property to mark its Lynx Pipeline and monitor its performance.

When the flagged Lynx Pipeline finishes and the screen is refreshed, a PipelineEntry performance event is generated. You can obtain it via PerformanceObserver.

#Usage rules

• The __lynx_timing_flag attribute must be a non-empty string. Empty values or invalid types will not trigger PerformanceObserver callbacks.
• When the __lynx_timing_flag attribute value is __lynx_timing_actual_fmp, an additional MetricActualFmpEntry performance event is generated.

#Examples

1. Mark a node: set the __lynx_timing_flag attribute on the target component. When the node finishes rendering, the framework automatically collects performance data for its Lynx Pipeline.
2. Get data: register an observer (PerformanceObserver) via lynx.performance.createObserver() to receive the corresponding performance data (PipelineEntry).

performance-apisrc/pipeline-entry/index.tsx

Preview

#Notes

#1. Multiple components set the same __lynx_timing_flag attribute

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>
  );
}

In this case, only the Lynx Pipeline data of the first component that appears on screen will be recorded:

1. Compute ActualFMP once and send one MetricActualFmpEntry.
2. Send one PipelineEntry.

If you want to record the moment when both components finish rendering, use different __lynx_timing_flag values.

#2. The same component renders multiple times

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>
  );
}

In this scenario, only the Lynx Pipeline data for the component’s first appearance is recorded:

1. Compute ActualFMP once and send one MetricActualFmpEntry.
2. Send one PipelineEntry.

If you need to measure each render individually, implement as follows:

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>
  );
}

#Compatibility