Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of how to optimize the performance of WeChat Mini Programs, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this article on how to optimize the performance of WeChat Mini Programs. Let's take a look.

Why do performance optimizations?

All performance optimization is for experience optimization.

1. When using Mini Program, do you often encounter the following problems?

When it is turned on, the screen is always blank.

Open it in loading state, turn it around a few times

My page is clicked. Why is it so slow to jump?

Why is my list getting more and more stuck?

two。 What are the directions of our optimization?

Startup loading performance

Rendering performanc

3. Startup loading performance 1. First load

Have you ever seen a picture like this when Mini Program was first loaded?

What do the three states in this picture correspond to?

When Mini Program starts, Wechat displays a fixed startup interface for Mini Program, which contains the icon, name and loading prompt icon of Mini Program. At this point, Wechat will complete several tasks behind it: download the Mini Program code package, load the Mini Program code package, and initialize the Mini Program home page. The Mini Program code package downloaded is not the source code of Mini Program, but the compiled, compressed and packaged code package.

two。 Loading sequence

What is the order in which Mini Program loads?

Wechat will prepare the general operating environment for Mini Program before the launch of Mini Program. This running environment includes several threads for Mini Program, in which the initialization of the Mini Program basic library is completed, the general logic is executed in advance, and the Mini Program is ready to start as much as possible. This can significantly reduce the startup time of Mini Program.

Through 2, we know that the first picture in question 1 is resource preparation (code package download); the second picture is the injection of business code and the first rendering of the landing page; the third picture is the loading state of the landing page data request (some Mini Program exists)

3. Control packet size

The most direct way to improve the experience is to control the size of Mini Program packets, which is the most obvious.

Check the "compress code when uploading code" option in the developer tool

Clean up useless code and resource files (including useless log code) in a timely manner

Reduce the number and size of pictures and other resources in the resource package (in theory, other picture resources are downloaded from the network except for the small icon), and the compression rate of picture resources is limited.

From the developer's point of view, controlling the package size helps reduce the startup time of Mini Program. For code packages lower than 1MB, the download time can be controlled within 929ms (iOS) and 1500ms (Android).

4. Using subpackage loading mechanism

According to the business scenario, put the highly visited pages in the main package, the low visited pages in the subpackage, and load them on demand.

When using subcontracting, you need to pay attention to the division of code and resource file directories. The pages that need to be accessed at startup and the resource files they depend on should be placed in the main package.

(5) adopt the technology of subpackage preloading

On the basis of 4, when the user clicks on the directory of the subpackage, there is still a process of downloading the code package, which will feel obvious stutters, so it is not recommended to open the subpackage too big. of course, we can use the subpackage preloading technology. you don't need to wait until the user clicks to the subpackage page to download the subpackage, but you can preload the subpackage according to the later data. Load the user on the sub-package page that may be clicked on the first page, and jump directly when the user clicks.

This configuration-based subpacket preloading technology can be judged according to the user's network type, and it is preloaded only when the user is in good network conditions, and it is flexible and controllable.

6. Using independent subcontracting technology

At present, there are many ways of Mini Program main package + sub-package (2M+6M), but when doing many operational activities, we will find that the activity (red packet) is in the sub-package, but the landing page link of the operation and product launch is the sub-package link, this is the user must first download the main package content (generally larger) when directly landing, and download the sub-package content (smaller than the main package). This makes the user experience is not very good in Mini Program scenarios where users stay for a short time, and a large part of the traffic is wasted.

The independent subcontracting technology can be used, which is different from the subpackage and has nothing to do with the main package. In the functionally independent subpackage, users only need to download the subpackage resources.

7. Suggestions for optimizing the loading of the first screen

7.1 advance request

Asynchronous requests can be loaded on the page onLoad without having to wait for the page ready to request data asynchronously. Of course, it would be better to pre-request the core asynchronous request of the current page when the front page clicks to jump.

7.2 leverage caching

Using storage API, the asynchronous data with low changing frequency is cached. During the second startup, the cached data is first used for initialization rendering, and then the asynchronous data is updated in the background, which not only optimizes the performance, but also enables users to use key services smoothly in a netless environment.

7.3 avoid white screen

You can take some useful fields to the current page on the front page and render them for the first time (some data on the list page-> details page). The module without data can occupy the space on the skeleton screen, so that the user will not wait anxiously. even left.

7.4 timely feedback

Timely feedback on the interactions that require users to wait to prevent users from thinking that Mini Program is stuck and unresponsive

Rendering performance optimization 1. Principle of Mini Program rendering

For interface rendering under dual threads, Mini Program's logic layer and rendering layer are two separate threads. In the rendering layer, the host environment will convert the WXML into the corresponding JS object. When the data in the logic layer changes, we need to transfer the data from the logic layer to the rendering layer through the setData method provided by the host environment. After comparing the differences before and after, apply the differences to the original Dom tree to render the correct UI interface.

By analyzing this process, it is not difficult to know that the time of page initialization consists of two parts: the initial data communication time and the initial rendering time. Among them, the time of data communication refers to the time that the data starts to organize data from the logic layer to the complete reception of the view layer, and the total time when the amount of data is less than 64KB can be controlled within the 30ms. Generally speaking, there is a positive correlation between the transmission time and the amount of data, and the transmission of too large data will significantly increase this time. Therefore, reducing the amount of data transmitted is an effective way to reduce the time of data transmission.

two。 Avoid improper use of setData

During data transfer, the logical layer performs a JSON.stringify to remove the non-transferable parts of the setData data, and then sends the data to the view layer. At the same time, the logic layer will merge the data fields set by setData with data, so that developers can use this.data to read the changed data. Therefore, in order to improve the performance of data updates, it is best for developers to follow the following principles when performing setData calls:

2.1Do not call setData too frequently, consider merging multiple setData into one setData call

2.2 the performance of data communication is positively related to the amount of data, so if there are some data fields that are not displayed in the interface and the data structure is complex or contains long strings, setData should not be used to set these data.

2.3 data that has nothing to do with interface rendering should not be set in data, but can be set under other fields of page object.

Code examples of ways to improve the performance of data updates

Page ({onShow: function () {/ / do not frequently call setData this.setData ({a: 1}) this.setData ({b: 2}) / / most of the time it can be optimized to this.setData ({a: 1, b: 2}) / / do not set data that is not used in interface rendering And put the interface-independent data outside the data this.setData ({myData: {a: 'this string is used in WXML', b: 'this string is not used in WXML, and it is very long …' }}) / / can be optimized to this.setData ({'myData.a':' this string is used in WXML'}) this._myData = {b: 'this string is not used in WXML, and it is very long.' }) copy the code

2.4 do not setData on background pages

Some operations will be done on some pages, but after the page jumps, the code logic is still executed, when multiple webview share a js process; the background setData operation will preempt the rendering resources of the foreground page.

3. Improper use of user events

When the view layer feeds back the event to the logic layer, it also needs a communication process, and the direction of communication is from the view layer to the logic layer. Because this communication process is asynchronous, there will be a certain delay, and the delay time is also positively related to the amount of data transmitted. When the amount of data is less than 64KB, it is in the 30ms. There are two main ways to reduce delay time.

1. Remove unnecessary event bindings (bind and catch in WXML) to reduce the amount of data and times of communication; 2. Event binding requires the dataset of target and currentTarget to be transferred, so don't put too much data in the node's data prefix attribute.

4. Principle of view layer rendering

4.1 first rendering

The initial rendering occurs when the page is first created. During the initial rendering, the initial data is applied to the corresponding WXML clips to generate a node tree. The node tree is the page tree structure seen in the developer tool WXML panel, which contains information such as the names, attribute values and event callback functions of all component nodes in the page. Finally, according to the nodes contained in the node tree, each component is created in turn on the interface.

In this whole process, the time cost is generally proportional to the total number of nodes in the node tree. Therefore, reducing the number of nodes in WXML can effectively reduce the time overhead of initial rendering and re-rendering, and improve rendering performance.

An example of simplifying WXML code

{{myText}} text > view > view > {{myText}} view > copy the code

4.2 re-render

After the initial rendering, the view layer can apply setData data multiple times. Each time you apply setData data, a re-render is performed to update the interface. The data and the current node tree from the initial rendering are reserved for re-rendering. Each time you re-render, apply the data and setData data to the WXML fragment to get a new node tree. Then compare the new node tree with the current node tree so that you can see which nodes and which attributes need to be updated and which nodes need to be added or removed. Finally, merge the setData data into data and replace the old node tree with the new node tree for the next re-rendering.

When comparing the current node tree with the new node tree, it focuses on comparing the node attributes affected by the setData data. Therefore, removing unnecessary data and reducing the amount of data in setData also help to improve the performance of this step.

5. Use custom components

The update of the custom component is only carried out within the component and is not affected by other non-divisible contents of the page; for example, the timing module of some operational activities can be extracted separately to make a timing component, and the update of the timing component will not affect the update of other elements on the page; each component will also have its own independent logical space. Each component has its own independent data and setData calls.

6. Avoid improper use of onPageScroll

Each event monitoring is a view-to-logic communication process, so listen to pageSrcoll only when necessary

This is the end of the article on "how to optimize the performance of WeChat Mini Programs". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to optimize WeChat Mini Programs's performance". If you want to learn more knowledge, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.