Limit the number of WXML nodes on a page

The number of WXML nodes on the page is less than 1000, the node tree depth is less than 30 layers, and the number of child nodes is less than 60

Applet performance score details refer to the official link

List page optimization

  1. Reduce unnecessary tag nesting
  2. Optimize the use of setData

The performance of setDate is limited by the size of setData data and the frequency of call. Therefore, optimization should be carried out around reducing the size of setData data each time and reducing the frequency of setData calls. ##### (1) Delete redundant fields Colleagues at the back end often take out data from the database and directly return it to the front end without any processing, which will lead to a lot of redundant data and many fields are not needed at all. We need to delete these fields and reduce the data size of setDate. ##### (2) Advanced usage of setData Usually, the operation of adding, deleting and modifying data in data is to take out the original data, process it, and then update it with setData as a whole. For example, more pull-up loading is used in our list, and data needs to be added to the tail of listData:

 newList=[{...},{...}];
   this.setData({
     listData:[...this.data.listData,...newList]
   })
Copy the code

This will result in the increasing amount of setDate data, and the page will become more and more jammed.

  • Correct use of setData posture

For example, if we want to modify the isDisplay property of the first element of the listData array, we can do this:

  let index=0;
  this.setData({
     [`listData[${index}].isDisplay`] :false,})Copy the code

What if we wanted to change the isDisplay property of elements with subscripts from 0 to 9 in the listData array at the same time? You might think of using a for loop to execute setData:

    for(let index=0; index<10; index++){this.setData({
        [`listData[${index}].isDisplay`] :false})},Copy the code

This will cause another problem, that is, listData calls too often, will also lead to performance problems, the correct way to handle is to first collect the data to modify, and then call setData once processing:

  let changeData={};
  for(let index=0; index<10; index++){ changeData[[`listData[${index}].isDisplay`]] =false;
  }
  this.setData(changeData);
Copy the code

This changes the isDisplay property of the elements with subscripts 0 through 9 in the listData array to false.

– setData Adds data to the end of the array

If only one piece of data is added

 letnewData={... };this.setData({
    [`listData[The ${this.data.listData.length}] `]:newData
  })
Copy the code

Add multiple pieces of data

 let newData=[{...},{...},{...},{...},{...},{...}];
  let index=this.data.listData.length
    newData.forEach((item) = > {
        newData['listData[' + (index++) + '] '] = item // assign value, index increment
    }) 
  this.setData(newData)
Copy the code

Use custom components

By encapsulating one or more rows of a list into a custom component, using a component on a list page that counts only one node, you can multiply the amount of data your list can render. There is also a limit to the number of nodes within a component, but you can nest components layer by layer to achieve an infinite load of the list if you are bothered

Using virtual lists

After the above steps, the performance of the list is greatly improved, but if the amount of data is too large, the number of WXML nodes can exceed the limit, resulting in page errors. Our processing method is to use a virtual list, the page only render the current visual area and a number of nodes of data above and below the visual area, through isDisplay control node rendering.

  • Above the visible area: above
  • Viewable area: Screen
  • Below the visible area: below

.