preface

In July 2018, the module of “Performance optimization of small programs” in the special course of small programs in wechat open class mentioned the knowledge of performance optimization of small programs, which was described from the two aspects of startup loading performance optimization and rendering performance optimization, and mentioned how to improve the performance optimization of small programs in daily development. And how applets will be improved for some performance problems (including the concept of subcontracting preloading and independent subcontracting)

I’m just taking notes to record, which may be a little rough. You can watch the video of the speech directly. I think it’s wonderful. Because it is a small program, you can directly go to the wechat small program search “wechat open class” to view learning.

Enable load performance optimization

Start-up process mechanism

  • Resource preparation (code download)
  • Business code injection and rendering
  • Asynchronously requesting data (partial applet)

Controls the size of code packages

  • Enable automatic compression when uploading code in developer tools
  • Clean up useless code and resource files in time
  • Reduce the size and number of resource files such as images in your code package

The subcontract to load

Limitations and solutions of subcontracting loading

  • Subcontract preloading (upcoming feature)
  • Subcontracting loading – Independent subcontracting (coming soon) can download and run subcontracting independently of jewelry. Start from the standalone subcontracting page and just download and inject the subcontracting to open the page.

Experience optimization suggestions for the first screen loading

  • Request ahead of time: Request data asynchronously without waiting for the rendering of the page to complete.
  • Take advantage of caching. Cache asynchronous request data using the Storage API. During the second boot, the page is rendered using cached data and then updated in the background
  • Avoid blank screen: Show the skeleton and basic content first
  • Timely feedback

Optimization of rendering mechanics

Applets render mechanism

Avoid improper use of setData

  • Use data to share data between methods (possibly increasing the amount of data transferred by setData) – It is recommended that data only include data related to the page
  • Use setData to transfer large amounts of data — only changing data
  • Call setData frequently for short periods of time – merge consecutive setData
  • Background page setData, seize the foreground page rendering resources — the page after entering the background setData call, delayed until the page display time

Conclusion:

  • Each call of setData is an inter-process communication process, and the communication cost is positively correlated with the data amount of setData
  • SetData causes the view layer page content to be updated, a time-consuming operation that blocks user interaction for some time
  • SetData is the most frequently used of applets, and the most likely to cause performance problems

Avoid improper use of onPageScroll

  • Listen for pageScroll events only when necessary
  • Avoid executing complex logic in onPageScroll
  • Avoid frequent calls to setData in onPageScroll
  • Avoid frequent SelectQuery of node information. IntersectionObserver of node layout is recommended in some scenarios instead

Use custom components