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

This article mainly introduces the common setData operation errors what the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that you will have some gains after reading this common setData operation errors, let's take a look.

SetData

SetData is the most frequently used interface in Mini Program development, and it is also the interface that is most likely to cause performance problems. Before introducing common misuses, let's briefly introduce how setData works behind it.

working principle

Mini Program's view layer currently uses WebView as the rendering carrier, while the logical layer uses a separate JavascriptCore as the running environment. Architecturally, WebView and JavascriptCore are independent modules and do not have a channel for direct data sharing. Currently, the data transfer between the view layer and the logic layer is actually achieved through the evaluateJavascript provided on both sides. That is, the data transmitted by the user needs to be transferred in the form of a string, and at the same time, the converted data content is spliced into a JS script, and then transferred to both sides of the independent environment by executing the JS script.

The execution of evaluateJavascript will be affected by many aspects, and the arrival of data to the view layer is not real-time. WebView in the same process actually shares a JS VM. If the JS thread in the WebView is performing rendering or other logic, it will affect the actual execution time of the evaluateJavascript script, and multiple WebView will also preempt the execution permission of the JS VM. In addition, the compilation and execution of the JS itself takes time, which is a factor affecting the data transfer speed.

Common setData operation errors

1. Go to setData frequently

In some of the cases we have analyzed, some Mini Program will setData very frequently (millisecond), which leads to two consequences:

Under Android, users will feel stutter when sliding, and the operation feedback delay is serious, because the JS thread has been compiling and performing rendering, which fails to transmit user operation events to the logic layer in time, and the logic layer cannot transmit the operation processing results to the view layer in time.

There is a delay in rendering, because the JS thread of WebView has been busy, the communication time from logic layer to page layer increases, hundreds of milliseconds have elapsed since the data message received by view layer, and the rendering result is not real-time.

two。 Every time setData passes a lot of new data

From the underlying implementation of setData, our data transfer is actually an evaluateJavascript script process, when the amount of data is too large, it will increase the compilation and execution time of the script and occupy the WebView JS thread.

3. SetData the backstage page.

When the page enters the backstage state (the user is not visible), you should not continue to setData. The rendering of the backstage page will not be felt by the user. In addition, the setData of the backstage page will also preempt the execution of the foreground page.

Picture resources

At present, the main performance problem of picture resources lies in large pictures and long list pictures, both of which may cause the memory consumption of iOS clients to increase, which will trigger the system to recycle Mini Program pages.

The effect of pictures on memory

On iOS, Mini Program's page is made up of multiple WKWebView, and some of the WKWebView will be recycled when the system memory is tight. From the cases we have analyzed in the past, the use of large images and long list images can lead to WKWebView recycling.

The influence of pictures on page switching

In addition to memory problems, large pictures can also cause stutters in page switching. In the cases we have analyzed, a part of Mini Program will quote a large picture on the page, and the frame stutter will occur in the back switch of the page.

At present, we recommend that developers minimize the use of large image resources.

Optimization of code package size

Mini Program initially limited the code package 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. For developers, the increase in the code package limit can achieve richer functions, but for users, it also increases the download traffic and the occupation of local space.

While implementing the business logic, it is necessary for developers to reduce the size of the code package as much as possible, because the code package size directly affects the download speed, thus affecting the user's first opening experience. In addition to the refactoring optimization of the code itself, you can also optimize the code size from these two aspects:

Control the picture 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. CDN enables GZIP compression, so users download the compressed GZIP package, which is smaller than the original code package. However, we analyzed the data and found that the code package compression ratio varies greatly among different Mini Program. Some of them can reach 30%, while some of them are only 80%. One of the reasons for this difference is the use of image resources. GZIP has the best compression effect on text-based resources, often with a compression ratio of 70% and 80% when compressing large files, but has little effect on resources that have already been compressed (such as most image formats).

Clean up unused code and resources in a timely manner

In daily development, we may introduce some new library files, but after a period of time, we no longer use this library for various reasons, and we often just remove references from the code and forget to delete such library files. At present, Mini Program packaging will put all the 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, thus affecting the overall code package size.

This is the end of the article on "what are the common setData operation errors?" Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "what are the common setData operation errors". 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.