Some suggestions on mini program optimization (summary)

setData

setData is the most frequently used interface in mini program development and is also the most likely interface to cause performance problems. Before introducing common wrong usage, let’s briefly introduce the working principle behind setData.

How it works

The view layer of the applet currently uses WebView as the rendering carrier, while the logic layer is composed of independent JavascriptCore as the running environment. Architecturally, WebView and JavascriptCore are independent modules and do not have channels for direct sharing of data. Currently, the data transmission of the view layer and the logic layer is actually implemented through the evaluateJavascript provided on both sides. That is, the data transmitted by the user needs to be converted into a string and passed, and the converted data content is spliced into a JS script, and then passed to the independent environment on both sides by executing the JS script.

The execution of evaluateJavascript will be affected in many ways, and the data reaches the view layer in real time.

Common setData operation errors

1. Go to setData frequently

In some cases we have analyzed, some mini programs will setData very frequently (milliseconds), which leads to two consequences:

On Android, users will feel stuttering when sliding, and the operation feedback delay is serious, because the JS thread has been compiling and executing rendering, and fails to pass user operation events to the logic layer in time, and the logic layer cannot pass the operation processing results to the view layer in time;
There is a delay in rendering. Since the JS thread of the WebView has been busy, the communication from the logic layer to the page layer has increased. The data message received by the view layer has passed several hundred milliseconds since the issuance time, and the rendering result is not real-time;

2. Each time setData passes a large amount of new data

From the underlying implementation of setData, we can see that our data transmission is actually an evaluate Javascript scripting process. When the amount of data is too large, the script's compilation and execution time will be increased and the WebView JS thread will be occupied.

3. SetData on the background page

When the page enters the background state (the user is not visible), you should not continue to setData. The rendering of the background state page cannot be felt by the user. In addition, settingData on the background state page will also seize the execution of the front-end page.

Image Resources

The main performance problems of image resources are on large images and long list images. Both of these situations may lead to an increase in the memory usage of iOS clients, which triggers the system to recycle the mini program page.

The impact of pictures on memory

The impact of pictures on page switching

In addition to memory problems, large images can also cause stuttering in page switching. In the cases we have analyzed, some applets will reference large images on the page, and frames will be stuttered during the page back-to-back switch.

Currently we recommend that developers minimize the use of large image resources.

Optimization of code package size

At the beginning of the applet, the code package was limited to 1MB, but we received a lot of feedback that the code package size was not enough. After evaluation, we relaxed this limit and increased it to 2MB. The increase in the upper limit of code packages can achieve richer functions for developers, but for users, it also increases the usage of download traffic and local space.

While implementing business logic, it is also necessary for developers to minimize the size of code packages, because the size of code packages directly affects the download speed, thus affecting the user's first opening experience. In addition to the reconstruction and optimization of the code itself, you can also start to optimize the code size from these two aspects:

Control the image resources in the code package

After the mini program code package is compiled, it will be placed on WeChat's CDN for users to download. The CDN enables GZIP compression, so the user downloads the compressed GZIP package, which is smaller in size than the original code package. However, we analyzed the data and found that the code package compression ratio between different mini programs is quite different, with some reaching 30%, while some are only 80%. One of the reasons for this difference is the use of image resources. GZIP is the best for text-based resources compression, often up to 70%-80% compression rates when compressing larger files, but very little if it is used for already compressed resources (such as most image formats).

Clean up unused code and resources in a timely manner

During daily development, we may have introduced some new library files, but after a while, we no longer use this library for various reasons. We often just remove the references in the code and forget to delete this type of library files. At present, the mini program package will put all files under the project into the code package, that is, these library files and resources that have not been actually used will also be put into the code package, which will affect the overall size of the code package.

WXS module

Each wxs module has a built-in module object.
It is directly introduced in wxml, and the data that needs to be converted can be written into it to prevent the burden on setData.

Excessive number of WXML nodes has been used

A WXML node tree that is too large will increase memory usage and the style reordering time will be longer. It is recommended that a page uses less than 1,000 WXML nodes, the depth of the node tree is less than 30 layers, and the number of child nodes is not greater than 60.

Mini programs have concurrency restrictions

The maximum concurrency limit for , , is 10.

All public methods and components are adopted for the sake of security

Writing public methods and components can avoid duplicating the wheel.
1. Public burying method
2. Various methods for handling js (transfer https, throttle, formatTime, etc.)
3. Public components (iphonex compatible components, countdown components, etc.)

A request queue needs to be written, and if the concurrency amount is greater than 10, wait for the request.

A pit buried

The public method is used to bury the points, and it is more accurate to put the pv bury points onshow life cycle on page exposure.

setData Note

1. Go to setData frequently
No variables that exist that are not bound to WXML need to be passed into setData.

2. Each time setData passes a large amount of new data, which can be updated locally.

({
  list[index] = newList[index]

})

3. SetData on the background page

This is the end of this article about some suggestions (summary) on mini program optimization. For more related mini program optimization content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!