The way to optimize the performance of Lewand's Mini Program

This article is about 10 minutes long. The small program developers of Lewan Alliance are all dry goods ~

Applet background

Since the Play Mini Program has been launched last year, I set a goal of “experience with an App-like exquisite experience”, which is undoubtedly a challenge for a person to develop the Mini Program.

In order to achieve the goal, "page performance", "friendly product experience" and "stable system service" have become my most basic implementation principles.

The homepage is the face of the mini-app, and its performance is closely related to the user retention rate. Therefore, in early 2020, I carried out an all-round upgrade and renovation of the Lewan homepage, digging into the performance plasticity of small programs from loading, rendering and other dimensions.

In addition, in order to improve the efficiency of research and development, while the company is adding new needs, it is constantly optimizing and transforming. Today's Lewan alliance applet can be said to be completely new.

What is high performance?

When it comes to high performance, everyone will say: "The page loads fast enough." It seems that the loading speed has become the standard for high performance, but it is not enough to load fast.

Think about it, the page loads quickly, but the carousel image freezes, the search box is invalid, the page layout is not uniform and aesthetically pleasing, pull up Laton, think about it enough to let users lose. Therefore, considering the loading speed alone is not enough.

Applet background performance analysis

WeChat Mini Program also has performance indicators:

• The first screen time does not exceed 5 seconds;
• The rendering time does not exceed 500ms;
• The number of calls per second  setData does not exceed 20 times;
• setData The data in the  JSON.stringify future does not exceed 256kb;
• The page WXML node is less than 1000, the depth of the node tree is less than 30 layers, and the number of child nodes is not more than 60;
• All network requests return results within 1 second;

 

These data, you can use the developer tool experience scoring tool (`Audits` panel) to experience the score, according to the optimization suggestions given, targeted adjustments

 

Second, we can also analyze the data according to the three dimensions of applet management platform , applet assistant and network performance

Through these auxiliary tools, we can do detailed analysis based on the conditions of the client system , model , network environment and access source , which is still very valuable.

Performance Analysis of the Mini Program of Lewan Alliance

1. The applet starts too slowly

 

First, analyze the reason:

At this stage, small programs (including the timing before and after startup), WeChat will silently complete the following tasks:

1. Prepare the operating environment:

2. Download the applet code package:

3. Load the applet code package:

4. Initialize Mini Program Homepage:

In this step, the key is to control the size of the small program package , which can effectively shorten the download time (controlling the size of the package can intuitively feel the performance improvement of the small program)

Second, to control the size of the package, my usual method is:

1. Removal of useless files, functions, and styles:

2. Reduce the static resource files in the code package: It is recommended that static resources such as pictures and videos are placed on the CDN

3. Backward logic, streamline business logic: Generally, the presentation logic that does not involve front-end computing can be appropriately moved backward. It depends on you to discuss with your backend classmates, give them the transformation requirements, and be careful to be beaten every minute (a joke) ... but this can really save a lot of frontend code, and many times, what are found after going online problem. It can also be solved directly on the back end, without review, and then released

4. Reuse template plugin:

5. Subcontract loading, part of the page is h5

2. White screen time

The white screen during this period of time is mainly composed of two elements:

First, analyze the reason:

1. Network resource loading time:

2. Rendering time:

Second, what is the solution?

1. Start the local cache: When the user accesses the page, the data returned from the last interface request can be taken from the cache first, and then overwritten when the network request is completed (but be aware that some timely data will not work, still depends on Usage scenario), Lewand has not used this yet. Use wx.getBackgroundFetchData to provide a client-side cache data solution provided by WeChat. Official documentation https://developers.weixin.qq.com/miniprogram/dev/api/storage/background-fetch/wx.getBackgroundFetchData.html

2. Time-sharing rendering: By delaying the rendering time of non-key elements, free up resources for key rendering paths.

It can be seen that the new board on today is intentionally postponed to render, so that the resources are free to render the banner picture (there are many banner pictures in the Lewan alliance small program)

3. Pictures use webP format: a picture file format introduced by Google that supports lossy / lossless compression, and can be used by students with resources

4.  Picture cropping & degradation: Alibaba Cloud OSS is used for Lewan

5.  Image lazy loading, optimization of CSS Sprite: the second level menu of the home page of Leplay is to use the Sprite image, the lazy image loading program img tag has  lazy-load = "true"

6.  Downgrade and load large picture resources: In Leplay, almost all big pictures use this method (see the banner on the home page) ( we can first render highly compressed blurred pictures, and use a hidden  node to load the original picture, After the original image is loaded, it will be transferred to the real node for rendering <image> .)

<!-- banner.wxml -->
<image src="{{url}}" />

<!-- 图片加载器 -->
<image
  style="width:0;height:0;display:none"
  src="{{preloadUrl}}"
  bindload="onImgLoad"
  binderror="onErrorLoad"
/>

methods: { 
    onImgLoad () { 
      this .setData ({ 
        url: this .originUrl                        // Load the original image 
      }) 
    } 
  }

The above is the key code for downgrading and loading images (note that  tags with  styles will only load image resources, but not render. ) display: none <image>

Recycle background page timer

This step is especially critical in the Leplay applet, which has quite a lot of page requirements to use setInterval , setTimeout

During peak hours, a page will need to run ten timers at the same time, so  you must manually clean up the page (component)  and  restore the timer at the  time. The callback  of a timer  is insignificant, but it cannot be ignored.onHideonShowsetData

Avoid repeated memory operations in frequent events

1. onPageScroll Throttling for event callback: reference function throttling Throttle

2. Avoid CPU-intensive operations, such as complex calculations;

3. Avoid calling , or reducing  the amount of data: setData setDatadelete  useless data

4. Try to use IntersectionObserver ^[24]  instead of  SelectorQuery ^[25] , the former has less impact on performance;

to sum up

Through the analysis and resolution of the above problems, the performance of Lewand Mini Program has been greatly improved. Thanks to Jingxi small program team for technical sharing, refer to the link https://mp.weixin.qq.com/s/nXModRImp4H7iisMQSc2Wg

Based on the underlying architecture principles of applets, the road to studying the performance of applets is still a long way. I will continue to work hard on the road of researching performance and improving experience.

Finally, I hope this sharing will bring you a little reference value.