# 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.