#Marking Lynx Pipeline

The Lynx Pipeline defines the complete process from rendering trigger to display on the screen. If you are concerned about the performance of the rendering process for certain key components, you can mark the Lynx Pipeline that renders them by setting the __lynx_timing_flag attribute. This allows you to monitor the performance of that specific Lynx Pipeline.

When a marked Lynx Pipeline execution is completed and the screen display is refreshed, a PipelineEntry performance event is generated. You can retrieve this event using the PerformanceObserver.

#Usage Rules

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

#Usage Example

1. Marking the Node: Set the __lynx_timing_flag attribute on the target component. When the node finishes rendering, the framework will automatically collect performance data for its Lynx Pipeline.
2. Getting Data: Register an observer using lynx.performance.createObserver() to obtain relevant performance data (PipelineEntry).

performance-apisrc/pipeline-entry/index.tsx

Preview

#Important Notes

#1. Multiple Components with Same 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>
  );
}

In this case, only the Lynx Pipeline data of the first displayed component will be counted:

1. Calculate the ActualFMP metric and send a MetricActualFmpEntry.

2. Send a PipelineEntry.

If you want to track the timing of both components completing rendering, using different __lynx_timing_flag values.

#2. Re-rendering Same Component

export default function App() {
  return (
    <view className="container">
      {data.needShow &&
        <text __lynx_timing_flag="__lynx_timing_actual_fmp">
          {data.msg}
        </text>
      }
    </view>
  );
}

In this case, only the Lynx Pipeline data of the first displayed instance of the component will be counted:

1. Calculate the ActualFMP metric and send a MetricActualFmpEntry.

2. Send a PipelineEntry.

If you want to perceive the rendering performance of the component with each data update, you can use data-driven flags 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