(1) Optimization Tips

setData

setData Is a small program to develop the most frequently used interface, it is most likely to lead to performance problems interfaces. Before introducing common mistakes usage, briefly explain setData the principle behind it.

working principle

View layer applet as rendered WebView currently used carrier, and the logical layer is made as an independent JavascriptCore operating environment. In the framework, and the WebView JavascriptCore are independent modules, it does not have the shared data channel directly. Currently, the view layer and the data transfer logic layer, provided on both sides by actually evaluateJavascript implemented. I.e., the user data transmission, transmission needs to be converted to a string, and the converted content data together into a JS script, and then passed to the environment on both sides in the form of an independent execution of the JS script.

The evaluateJavascript execution will be affected by many aspects of the data arrives at the view layer is not real-time.

SetData common operational errors

1. Frequent go setData

In some cases we have analyzed the years, the small program will very frequently (milliseconds) to go setData, which led to two things:

Android user slides will feel Caton, operational feedback delay serious, because JS thread has been compiled perform rendering, failed to user operation events to the logic layer, logic layer will not be able to operate, without delay timely delivered to the view layer;
Rendering results have delay occurs, since the WebView JS thread has been busy, time-consuming page logical layer to the communication layer increases, the time data sent from the view layer message received hundreds of milliseconds have passed, not rendered real time;

2. Each setData have passed a number of new data

By the setDataunderlying implementation it shows that our data transmission is actually a evaluateJavascript script process, when the data is too large will increase the build script execution time, taking WebView JS thread,

3. state background pages setData

When the page into the background state (invisible to the user), should not continue to carry out setData, rendering the user state back page can not feel, in addition to the background page state setDatawill seize the execution of the front page.

Image Resources

The main performance issues Pictures of resources that are currently on the big picture and the long list of pictures, both of which are likely to lead to iOS client memory usage rises, triggering a small recovery system program page.

The impact of pictures on memory

On iOS, the applet page is composed of a plurality of WKWebView, when the system memory is tight, it will recover lost part of WKWebView. We analyze the case from the point of view of the past, the big picture and use a long list of causes WKWebView picture of the recovery.

Pictures of the impact of page switching

In addition to memory problems, can also cause big picture Caton page switching. The cases we analyzed, there are a small part of the program will reference the big picture on the page, drops frames, Caton will appear on the page backward handover.

Currently we recommend that developers minimize the use of resources the big picture.

Optimization of the code packet size

Start a small program code package is limited to 1MB, but we received a lot of feedback saying the code packet size is not enough, after evaluating our liberalized this restriction, increased to 2MB. Increasing the upper limit of the code package for developers, the ability to achieve a more feature-rich, but for users, it also increased the space occupied by the download traffic and local.

Developers to implement business logic as well as the need to minimize the size of the code package, because the code packet size directly affects the download speed, thus affecting the user's experience is first opened. In addition to optimizing the reconstructed code itself, but may also proceed from both optimize code size:

Resource control codes within a picture package

Applet code after compilation package will be placed in the micro-channel for download CDN, the CDN GZIP compression opened, the user is downloading GZIP compressed packet, its size will be smaller than the volume of the original code package. However, we found that data analysis, code package between different applets compression ratio differences are getting bigger, and some can reach 30%, while only 80% of the part, but a part of the reason for this difference is the use of image resources. GZIP compression on text-based resources are best when compressing large files can often be as high as 70% -80% compression rate, and if the resources already compressed (such as most of the image formats), the effect is minimal.

Timely clean-up is not used to code and resources

When the daily development, we may introduce some new library, and after a period of time, due to various reasons, they no longer use the library, and we often just remove code references, delete and forget such a library file. At present little is packaged under the project will be all the files into the internal code package, that is, they are not practical to use libraries and resources will be driven into the code package, which affects the overall code package size.

(2) Analysis Tools

Performance Trace tool

Micro letter Andoid 6.5.10 start, we offer a Trace export tool, developers can use this feature in Developer Tools Trace Panel.

Instructions

Need to be installed on the PC adb tool, you can refer to some mainstream tutorials for installation, use brew installed directly on the Mac.
Determined adb after the tool has been successfully installed, open the Developer Tools Trace Panel, Android phone via a USB connection on your PC, click "Choose Devices", this time may pop up on the phone connection authorization box, click "Allow."
After selecting the device, you need to turn on debugging development version of the applet on the phone, through the upper right corner of the menu, open the Performance Monitor panel, restart the applet;
After the restart, the program operates on a small, after the completion of the operation, the upper right corner of the menu, the data derived Trace;
At this point it will automatically pull Trace file on developer tools Trace Panel, you can select the Trace file to be analyzed;

You can adb devices determine whether the device and the PC connection is established command

Performance panel

From the micro-channel 6.5.8 start, we offer a performance panel allows developers to understand the performance of the applet. Developers can open under development version of the applet performance Panel, open: Go to Developer Edition applet, enter the upper right corner of the More button, click on the "Display Properties window."

Performance indicators Description panel

index	Explanation
CPU	CPU utilization applet process, provided only under Android
RAM	Provided, only under Android applet process memory footprint (Total Pss)
Start time consuming	The applet starts total time
Download time consuming	Small package download time-consuming, it will be downloaded when you first open the package or resources need to be updated
Page switching time-consuming	Applet page switching time-consuming
Frame rate / FPS
First time consuming rendering	First page rendering time-consuming
Render time-consuming again	Page again rendering time-consuming (usually triggered by setData operation developers)
Data caching	Applets stored in the interface buffer size Storage

- micro-channel performance applet