Micro channel small program performance two optimization direction

  • Start loading performance
  • Rendering performance

Start loading performance

Level 1: Reduce the load time of small packages

1. Control the size of the small program package

(1) Check the “Compress code” option of wechat developer tools to compress the code. (2) Timely clean up useless code and resource files (including useless log code). (3) Reduce the number and size of resources such as images in resource packs (in principle: ① Put small ICONS locally; ② Other picture resources downloaded from the network), picture resource compression rate is limited

According to statistics, the download time of code packages less than 1MB can be controlled within 929ms (iOS) and 1500ms (Android)

2. Subcontracting loading mechanism

According to the business scenario, the pages with high user visiting rate are placed in the main package, and the pages with low user visiting rate are placed in the sub-package and loaded on demand.

When using subcontracting, you need to pay attention to the division of code and resource file directories. The pages you need to access at startup and their dependent resource files should be placed in the main packageCopy the code

When the user clicks to the subpackage directory, there is still a code package download process, which will feel obvious delay, so it is not recommended to open the subpackage too big. Of course we can continue to use subcontract preloading techniques for optimization

3. Subcontract preloading technology

It does not need to wait until the user clicks on the sub-package page to download the sub-package, but according to the later data, it can do the pre-loading of the sub-package, load the sub-package page that the user may click on the current page, and jump directly after the user clicks;

The subpackage preloading technology based on configuration can be judged according to the user’s network type, and preloading is performed only when the user is in good network conditions. It’s flexible and controllable

Layer 2: Reduce the first screen load time (whether it is the home page or sub-page)

1. Make an asynchronous request in advance

Pre-request the core asynchronous request of the current page > onLoad for asynchronous request > onReady for asynchronous request

2. Leverage caching

Storage API is used to cache asynchronous data with low change frequency. During secondary startup, the cached data is first used for initial rendering, and then asynchronous data is updated in the background. This not only optimizes performance, but also enables users to smoothly use key services in a netless environment.

Lazy loading optimization

Load the contents of the top and bottom three screens of the user’s mobile phone screen in advance, monitor the user’s sliding event, and then continue the asynchronous request loading

  • If it’s a list and each row is the same height, you can multiply to see if you’re about to hit bottom
  • If the content of the page is completely irregular, the screen height is used to calculate whether the user is about to see more than three screens up and down

Rendering performance

It’s essentially optimizing around setData

Small program double thread design: small program is double thread, each setData will do two jobs: (1) modify the data in the data; ② Transfer the contents of setData from the logical layer to the rendering layer

1. Merge multiple setData calls into one setData call;

2. Allocate a location for storing data

Data that is not related to the rendering of the interface is best not set in the data. Consider setting it under other fields of the Page object

Page({
  onShow: function() {

    // Don't call setData too often
    this.setData({ a: 1 })
    this.setData({ b: 2 })
    // Most of the time can be optimized to
    this.setData({ a: 1.b: 2 })

    // Do not set data that is not used in interface rendering, and put data that is not relevant to the interface outside of data
    this.setData({
      myData: {
        a: 'This string is used in WXML'.b: 'This string is not used in WXML, and it is 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 long ………………………… '}}})Copy the code

3. SetData partially refreshes data

Scenario Requirements: 100 items of data. If you change a item in the list, refresh the item:

Before optimization: directly asynchronous request to obtain the latest background data, directly setData to replace the list array of data objects

After optimization: only the modified fields are updated:

this.setData({
    list[index] : newList[index]
})
Copy the code

4. Use native components

The native component is equivalent to the interaction and data transfer based on the wechat client, with far better performance than the small program side