#FPS Performance Analysis

FPS (Frames Per Second) performance analysis observes page smoothness during runtime. It is used to diagnose issues like scrolling lag, animation frame drops, and unresponsive interactions.

#How to Enable

1. Open the page to be tested on a real device.
2. Access the debugging tool:
   • iOS: Tap the ... button in the top-right corner, then tap Debugging Tools in the bottom sheet.
   • Android: Long-press the X button in the top-right corner, the App basic info panel will appear, then tap Open Debug at the bottom.
3. Tap Open vConsole in the debugging tool menu.
4. Find the Perf tab, then tap "Open FPS monitor" to enable performance monitoring.
5. Perform scrolling, switching, animations, and drag operations on the page, and observe frame rate changes.

#Applicable Scenarios

• Noticeable lag when scrolling lists
• Animations are not smooth
• Frame drops in high-frequency interaction scenarios
• Need to compare runtime smoothness before and after optimization

#Key Metrics

For more metrics, see the Debugging Guide.

#How to Interpret Results

• Consistently low FPS: Usually indicates the overall rendering load of the page is too heavy.
• FPS drops significantly when scrolling: Prioritize checking long list rendering, node count, and redundant re-renders.
• FPS drops during animations: Check if animations are driven by frequent data updates and whether a lighter animation approach can be used.
• Momentary frame drops during specific operations: Usually related to synchronous computation, batch updates, or large data processing.

If you have identified the issue, refer to the following documents:

• Using setData Wisely
• Render Performance Optimization