#Performance

#FMP（First Meaningful Paint）

Definition: The time it takes for the Miniapp to first meaningfully paint.
Scoring Standard: Scoring Condition: FMP time ≤ 1500ms
Optimization Suggestions:

• Prioritize loading key parts of the first screen.
• Cache high priority data to reduce first screen request delay.
• Preload key resources to avoid waiting for API callbacks.
• Reduce the amount of data rendered in one go and optimize calculation logic.

#Rendering Time

Definition: The time it takes for the page to first render or due to data changes to trigger a re-render.
Scoring Standard: Scoring Condition: Rendering time ≤ 500ms
Optimization Suggestions:

• Reduce setData transmission volume, lower setData call frequency.
• Avoid rendering large areas at the same time, optimize list rendering (e.g., virtual list).
• Reduce complex calculations.

#Page Minimum Frame Rate

Definition: The minimum frame rate of the page should not be lower than 30 FPS, otherwise it may cause jank.
Scoring Standard: Scoring Condition: ≥30 FPS
Optimization Suggestions:

• Use RJS to handle high-frequency drawing requests.
• Place some view layer calculation capabilities in SJS.

#Script Execution Time

Definition: The time it takes for a single synchronous execution of a JavaScript script.
Scoring Standard: Scoring Condition: Single execution ≤ 1 second
Optimization Suggestions:

• Check business code to ensure no long-running scripts.
• Split large tasks and use asynchronous batch execution.
• Avoid blocking main thread synchronous operations, such as large data processing.

#setData Call Frequency

Definition: Frequent setData calls may cause interface jank.
Scoring Standard: Scoring Condition: ≤20 calls per second
Optimization Suggestions:

• Merge setData calls, avoid invalid updates.
• Only update necessary data, reduce setData data volume.

#setData Data Size

Definition: setData data transmission volume may cause UI update delay.
Scoring Standard: Scoring Condition: ≤50KB (after JSON.stringify)
Optimization Suggestions:

• Only transmit necessary fields, avoid transmitting the entire object.
• Use setData({a.b.c:1 }) to update data locally.

#TYML Node Count

Definition: Page DOM structure too large may affect rendering performance.
Scoring Standard: Scoring Condition: ≤1000 nodes，tree depth ≤30 layers，child nodes ≤60
Optimization Suggestions:

• Reduce DOM hierarchy, avoid deep nesting.
• Control the number of child elements for each node.

#Network Request Duration

Definition: Server response time too long may affect first screen loading speed.
Scoring Standard: Scoring Condition: ≤1000ms
Optimization Suggestions:

• Server-side optimization of query speed, use cache.
• Compress return data, reduce JSON volume.

#Network Concurrent Request Count

Definition: Too many concurrent network requests may trigger request limit.
Scoring Standard: Scoring Condition: Number of requests with concurrent response time > 300ms ≤10 per second
Optimization Suggestions:

• Merge API requests, reduce unnecessary concurrent requests.

#Network Image Request Count

Definition: Too many image requests may cause loading to slow down.
Scoring Standard: Scoring Condition: ≤20 requests per second
Optimization Suggestions:

• Use lazy loading, avoid loading all images at once.
• Use CSS background-image or sprite image.

#Network Image Size

Definition: Large images may increase loading time, affecting first screen rendering.
Scoring Standard: Scoring Condition: Single image ≤300KB
Optimization Suggestions:

• Compress images.
• Use CDN to speed up image loading.

#Miniapp Channel Interaction Frequency

Definition: Too frequent calls to Kit capabilities may cause performance bottlenecks.
Scoring Standard: Scoring Condition: ≤20 times per second

Optimization Suggestions:

• Reasonable management of Kit API calls, avoid redundant operations.

#Miniapp Package Size

Definition: Miniapp source code package size may affect loading speed.
Scoring Standard: Scoring Condition: ≤2MB
Optimization Suggestions:

• Configure subpackages, reasonably split code modules.
• Use CDN to load static resources, reduce source code package size.
• Remove unused files, functions, styles.