# performance

# 1. The first screen time

Above-the-fold time refers to the time when users see the main content of the first screen from opening Weixin Mini Program, and too long a first-of-the-fold time will cause users to see a white screen for a long time, affecting the user experience.

Optimizing the first screen time can be divided into the following situations:

1. The first screen displays a lot of content, and it takes a collection of multiple pieces of data to render. This situation requires developers to prioritize the content, prioritize the high-priority content, and shorten the white screen time.
2. The data on which the first screen content relies takes too long to be requested from the server. Developers need to specifically analyze from the server side the reasons for the long time the server data is returned;
3. One-time rendering data is too large or the calculations rely on are too complex. These problems can be solved by reducing the amount of data for rendering and optimizing the algorithms for rendering-related data.

Required for a score: No more than 5 seconds for the first screen

# 2. Rendering time

Rendering time refers to the time it takes to render for the first time or for a page's structure to change as a result of data changes.

Excessive amounts of time spent on rendering interfaces can make the user feel sluggish and less experienced, and in this case, check whether the areas being displayed at the same time are too large (for example, the list is too long) or whether the computations upon which the rendering depends are too complex.

Score criteria: Render time less than 500 ms

# 3. Script Execution Time

Script execution time refers to the time that a JS script consumes in a synchronous execution, such as life cycle callbacks and synchronous execution time of event handling functions.

Excessive time spent executing a script can make the user feel sluggish and less experienced. When this happens, you need to confirm and optimize the script logic

Required for a score: Script runs for no more than 1 second in one execution cycle

# 4. SetData Call Frequency

Calls to the setData interface involve thread communication between the logic layer and the rendering layer. Too frequent communication may cause processing queue blocking, and untimely interface rendering leads to a stalling. Useless frequent calls should be avoided.

Score criteria: no more than 20 calls per second tosetData

# 5. SetData Data Size

Since Weixin Mini Program runs above the logical and render threads, calls to setData transfer data from the logical layer to the render layer, increasing communication time for data.

Scoring condition:setDataData not exceeding 256 KB afterJSON.stringify

# 6. Number of WXML nodes

It is recommended that a page use less than 1000 WXML nodes, a node tree less than 30 levels deep, and no more than 60 child nodes. A WXML node tree that is too large will increase memory usage and style rearrangement times longer, affecting the experience.

Scoring criteria: page WXML nodes less than 1000, node tree depth less than 30 layers, the number of child nodes less than 60

# 7. Image cache

When HTTP cache control is turned on, the next time the same picture is loaded, it will be read directly from the cache, greatly improving the loading speed.

Score: All images have HTTP caching enabled

# 8. Image size

Too many pictures increase download time and memory consumption, so the picture size should be controlled reasonably according to the size of the display area.

Score criteria: Picture width-to-height multiplier < = Actual display width- to-height multiply * (device pixel ratio ^ 2)

# 9. Requests are time consuming

Requests that take too long will keep users waiting or even leaving, so you should optimize server processing time, reduce the size of the back packets, and make the request respond quickly.

Score criteria: All network requests return results within 1 second

# 10. Number of network requests

Too many requests in a short period of time triggers the Weixin Mini Program limit on the number of parallel requests, and too many requests can lead to problems such as slow loading, so the number of requests should be reasonably controlled and even merged.

Score criteria: No more than 10 concurrent requests with a time of more than 300 ms initiated viawx.request

# 11. Number of image requests

Too many requests for images in a short period of time can trigger the browser's parallel loading limit, which can cause images to load slowly and users to handle the wait. The number should be controlled reasonably, and consider using Sprite technique or lazy loading of pictures outside the screen.

Scoring conditions: The number of concurrent image requests with the same domain name takes more than 100ms does not exceed 6

# 12. Network request cache

Initiating a network request always leaves the user waiting and can create a bad experience. Try to avoid unnecessary requests, such as caching the same requests

Scoring conditions: 3 minutes within the same URL request does not appear twice back package greater than 128 KB and the same content