# Rendering performance optimization

# 1. Properly listens to scroll events for pages or components

As long as the user passes in a onPageScroll listener during Page construction, the base library assumes that the developer needs to listen for page scoll events.At this point, when the user swipes the page, events are sent from the view layer to the logic layer at a high frequency, and there is a certain communication overhead.

Similarly, for ['] ((scroll-view)), ['] ((page-meta))This is also the case with components that can listen for sliding events through bindscroll.

It is precisely because of the high frequency of the scroll event that is triggered, it is easy for developers to misuse it, and it is necessary to pay attention when using it:

✅Do not listen to scroll events unnecessarily;
✅When implementing animations related to scrolling, prioritize scrolling-driven animation (only [``] ((scroll-view))) or WXS responding to events
❌When you do not need to listen for events, Page construction should not pass in the onPageScroll function, rather than leave the function blank;
❌Avoid performing complex logic in the scroll event listener function;
❌Avoid frequent calls to setData or synchronization APIs in scroll event listening.

Page({
  onPageScroll () {} // ❌不要保留空函数
})

Page({ 
  // ✅ 应直接不传入
})

# 2. Choose a high-performance animation implementation

When developing interface animation, developers should choose a high-performance animation implementation.

✅Use CSS gradients, CSS animations, or other animation implementations provided by the Weixin Mini Program framework as a priority.
✅In some complex scenarios, if the above methods are not met, you can use WXS to respond to the event to dynamically adjust the style attribute of the node to achieve animation.At the same time, this method can also dynamically generate animation based on the user's touch event;
❌Avoid changing the form of the interface through successive setData to implement animation.Although the implementation is simple and flexible, but very easy to appear large delay or Caton, and even lead to Weixin Mini Program dead;
✅If you have to use the setData method, you should change the setData of the page to the setData of the custom component to improve performance.

# 3. Listening for element exposure using IntersectionObserver

Some business scenarios will need to monitor the exposure of elements for some page status changes or for reporting analysis.

✅It is recommended to use node layout intersectionObserver to infer whether some nodes are visible and what percentage are visible;
❌Avoid checking whether an element is visible by listening for onPageScroll events and by continuing to query node information SelectQuery]((framework/view/selector)) in callbacks.

# 4. Control the number and level of WXML nodes

A WXML node tree that is too large will increase memory usage and style rearrangement times longer, affecting the experience.

✅It is recommended that the number of WXML nodes on a page should be less than 1000, the node tree depth should be less than 30 layers, and the number of child nodes should not be more than 60.

# 5. Controls the amount of custom data passed in during Page construction

For ease of development, developers can add arbitrary functions or data to the Object parameter passed by the Page construct and access it with this within the function of the page. For example:

Page({
  data: {}
  userInfo: {} // 自定义数据
  currentUser: 'Wechat' // 自定义数据
  onTap() { }
  onLoad() {
    console.log(this.currentUser)
  }
})

To ensure that the custom data is also different in different page instances, the Weixin Mini Program framework does this part of the data (except for function type fields) once the page is created. Deep copy can be costly if custom data is too much or too complex.

✅For more complex data objects, it is recommended that thePage onLoadorComponent createdInstead of passing in the parameter at the time of Page construction.

// ❌Use complex objects as custom data
Page({
  onLoad() { }
  bigData: { /* A complex object */ },
  longList: [ /* A long complex array*/ ]
})

// ✅Manually assign a value to this at runtime. Developers can choose deep copy, shallow copy or no copy as needed.
Page({
  onLoad() {
    this.bigData = { /* A complex object */ },
    this.longList = [ /* A long complex array*/ ]
  }
})