# Rendering performance optimization

# 1. Listen appropriately for a page or component scroll event

As long as the user is Page Construction is passed into the onPageScroll Listen, the base library will think that the developer needs to listen to the page scoll Events. At this time, when the user swipes the page, the event will be sent from the view layer to the logic layer in a high frequency, there is a certain communication overhead.

Similarly, for <scroll-view>、<page-meta> Etc. Can be obtained by Bindscroll This is also the case for components that listen for sliding events.

It is precisely because scroll Events are triggered with a high frequency, so developers can easily misuse them. Be careful when using them:

• Not necessary, not listening. scroll event
• When implementing scroll-related animations, preference is given to[Scroll Drive Animation]((view/animation#Scroll Driven Animation))(Only <scroll-view>) or WXS Responding to Events
• When you do not need to listen for events, the Page Construction should not pass in onPageScroll Function, rather than the leave empty function
• Avoid in the scroll Performing complex logic in event listener functions
• Avoid in the scroll Frequent calls in event listening setData Or synchronization API。

Page({
  onPageScroll () {} // Do not leave empty functions.
})

Page({ 
  //  Should not be passed in directly
})

# 2. Choose a high-performance animation implementation

Developers in the development of interface animation, should choose high-performance animation implementation.

• Priority use CSS Gradient, CSS Animation, or other provided by the Mini Program frameworkAnimation implementation methodFinish animation
• In some complex scenarios, if the above method is not satisfied, you can use WXS Responding to Events Dynamically adjust the node's style Property to do the animation effect. At the same time, this method can also dynamically generate animations based on user touch events.
• Avoid Through Continuous setData Change the form of the interface to achieve animation. Although it is simple and flexible to implement, it is easy to have a large delay or stuttering, and even cause the Mini Program to freeze.
• If you have to adopt setData Manner, should, as far as possible, place the page's setData In the custom component instead setData To improve performance.

# 3. use IntersectionObserver Monitor element exposure

Some business scenarios may require monitoring element exposure for some page state changes or escalation analysis.

• Suggested UseNode layout intersection state monitoring IntersectionObserver Infer whether certain nodes are visible and in what proportion
• Avoid listening. onPageScroll Event, and in the callback by continuingQuery node information SelectQuery To determine if the element is visible.

# 4. control WXML Number of nodes and levels

A too big WXML Node trees increase memory usage and take longer to rearrange styles, affecting the experience.

• Suggest a page WXML The number of nodes should be less than 1000 The node tree depth is less than 30 Layer, the number of child nodes is not greater than 60 A.

# 5. Controlled in the Page Amount of custom data passed in at construction time

For ease of development, developers can add arbitrary functions or data to Page Constructs the incoming Object Parameters, and within the function of the page with the this Visit. For example:

Page({
  data: {}
  userInfo: {} // Custom Data
  currentUser: 'WeChat'  // Custom Data
  onTap() { }
  onLoad() {
    console.log(this.currentUser)
  }
})

In order to ensure that the custom data is different in different page instances, the Mini Program framework will do this part of the data (except for function type fields) once at page creation time.Deep Copy, can be costly if the custom data is too large or too complex.

• For more complex data objects, it is recommended that the Page onLoad or Component created When manually assigned to the this On, rather than through the Page Parameters passed in at the time of construction.

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

//  The runtime manually assigns the value to the this。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*/ ]
  }
})