Open the vConsole tool for performance monitoring. The specific steps are as follows:
a. Set the pre-release version of the mini program and the Tuya App account has been added to the whitelist.
b. After entering the panel, long press the x in the upper right corner, and the basic information of the App will pop up. There is an "Open Debug" button below
c. Click to open the debugging tool
Open performance monitoring
a. Open the vConsole tool, find the Perf column, and click "Open FPS monitor" to open performance monitoring
b. Click the real-time performance monitoring panel to switch performance indicators
Performance indicators
Focus on two indicators
FPS
To determine whether the thread is overloaded
MT
To determine whether the logic layer and the view layer transfer too much data too quickly
When there are high-frequency operations and the page status needs to be updated in real time, it is recommended to use Rjs or Sjs capabilities.
If there are high-frequency real-time operations across components, it is recommended to use the eventChannel capability. Note that eventChannel can be used for data transmission between Rjs or Sjs (e.g. Sjs => Sjs/Rjs or Rjs => Rjs/Sjs).
For example, in the illustrated scenario: dragging the color wheel (component 1) requires the light strip (component 2) to be updated in real time.
There are generally the following animation solutions:
CSS animation
JS animation
Lottie animation
GIF image
Canvas / SVG self-drawing
Recommendations and selections:
CSS animation: Preferentially, when it is difficult to implement with CSS, consider other implementation methods.
JS animation: If the animation is relatively simple and the update frequency is not high, it can be used. It is not recommended to use JS to directly implement complex animations.
Lottie animation: For complex animations, ⚠️ pay attention to not using more than 2 on a page at the same time, otherwise it may be stuck.
GIF image: If the animation is relatively complex and requires multiple animations, it is recommended to use GIF images. Note that there should not be too many on the same page (it is recommended not to exceed 6).
Canvas / SVG self-drawing: If you need complex interactive animation, you can use it.