Mini Program
取消
Development
中文
EN
取消
  • Guide

    • # Reasonable use setData

    setData It is the interface that is most frequently used and most likely to cause performance problems in Mini Program development.

    # 1. setData The flow of

    setData The process can be roughly divided into several stages:

    • Logic Layer Virtual DOM Traversal and update of the tree, triggering the component life cycle and observer etc.
    • will Data Transfer from the logical layer to the view layer
    • View Layer Virtual DOM Tree Renewal, Real DOM Element and triggers the page rendering update.

    # 2. data communication

    For No. 2 Because the logic layer and the view layer of the Mini Program are two independent running environments and belong to different threads or processes, the data sharing can not be carried out directly./Process of data transmission, data deserialization, so the data transfer process isAsynchronous, non-real-time。

    iOS/iPadOS/MacOS On, the data transmission is carried out by evaluateJavascript Achieved, there will be additional JS The time taken for script parsing and execution.

    The time taken for data transmission is related toThe size of the amount of dataPositive correlation, if the opposite thread is busy, the data will beWait in message queue。

    # 3. Use of advice

    # 3.1 Data Should include only rendering-related data

    setData Should be used only for rendering-related data updates. use setData Updating render-independent fields in a way that triggers additional rendering processes, or increases the amount of data transferred, affecting rendering time.

    • Of the page or component Data Field that the application holds and the page or componentRendering relatedOf the data (i.e., directly in the wxml Fields that appear in)
    • Data indirectly related to page or component rendering can be set to[Pure data field]((custom-component/Pure-data )), can be used setData Set up and use observers Monitoring changes
    • Page or component rendering extraneous data, should hang in a non Data Under the fields of the this.userData = {userId: 'xxx'}
    • Avoid in the Data Contained inRendering irrelevantBusiness Data for
    • Avoid using Data Between page or component methodsData sharing
    • Avoid abuse [Pure data field]((custom-component/Pure-data )) To save the data that can be used with a non Data Field to save the data.

    # 3.2 control setData The frequency of

    every time setData Will trigger the logic layer virtual DOM Traversing and updating the tree may also trigger a complete page rendering process. Calls that are too frequent (in milliseconds) setData, will result in the following consequences:

    • Logical layer JS The thread continues to be busy, unable to respond properly to user action events, and unable to complete page switching properly
    • View layer JS Threads are constantly busy, the logical layer -> The communication time of view layer increases, the delay of receiving message in view layer is higher, and the rendering appears obvious delay.
    • The visual layer can not respond to the user operation in time, the user feels obviously stuck when sliding the page, the operation feedback is delayed, the user operation event can not be transmitted to the logic layer in time, and the logic layer can not transmit the operation processing results to the view layer in time.

    Therefore, the developer is calling setData Be aware when:

    • Called only when a page content update is needed setData
    • To the continuous setData Call as much as possiblemerging
    • Avoid unnecessary setData
    • Avoid persistent calls at excessive frequency SetData, such as millisecond countdown
    • Avoid in the onPageScroll Called each time in the callback setData。

    # 3.3 Choose the right setData range

    Component setData Will only cause updates to the current component and subcomponents, which can reduce the virtual DOM Computation overhead at update time.

    • For page elements that need to be updated frequently (for example: Spike countdown), they can be encapsulated as separate components and carried out within the component. setData Operation. Can be used when necessary CSS contain attributeLimit the scope for calculating layouts, styles, drawing, etc.

    # 3.4 setData Only changed data should be transmitted

    setData The amount of data will affect the time of data copy and data communication, increase the cost of page update, and cause page update delay.

    • setData Only fields that change should be passed in
    • It is recommended thatData pathChange an item in an array or a property of an object, such as this.setData({'array[2].message': 'newVal', 'a.b.c.d': 'newVal'})Instead of updating the entire object or array each time
    • Do not be in setData Transfer all data at once:this.setData(this.data)。

    # 3.5 Control the background state of the page setData

    Since the Mini Program logic layer is a single thread running, the background state page to setData It will also seize the running resources of the foreground page, and the rendering user of the background state page is unable to perceive, which will produce waste. On some platforms, each Mini Program rendering layer WebView Also sharing the same thread, the rendering and logic execution of the background page will also cause the front page to stall.

    • The update operation after the page cutting background, should be avoided as far as possible, or delayed to the page onShow Post delay proceeding
    • Avoid high frequency after cutting the background SetData, such as a countdown update.

    # 4. Performance analysis

    The developer can use the component's setUpdatePerformanceListener Interface to obtain updated performance statistics to analyze the components that cause performance bottlenecks.