Background: In the recent project, I used movable-view to make a drag-and-drop sorting function. When the functions were implemented and tested on the real computer, it was found that the drag-and-drop animations had serious lag and lost frames on Android, but they were quite smooth on IOS. Search Google found also have the same small partners have similar problems: small program to move drag picture Android too slow how to solve

The cause of frame loss caused by lag

For example, A page has two elements A and B, and the user makes the touchmove gesture on A and asks B to move with it. Movable-view is A typical example. The response process of a TouchMove event is as follows:

A. Throw touchMove event from Webview layer to Logic layer (App Service)

B, the logic layer (App Service) processes the TouchMove event, and then changes the position of B through setData

The response of a Touchmove needs to go through two communications between the logic layer and the rendering layer and one rendering, which takes a lot of time. In addition, setData rendering blocks other script execution, resulting in a delay in the animation process of the entire user interaction.

In view of the above reasons, wechat small program launched WXS(WX Script), its role is to enable the logic code to run in the Webview layer (Webview), by reducing the number of data transmission between the view layer and the logic layer, so as to achieve the purpose of optimization. For details, see WXS and WXS response events

Optimization practices for using WXS in Taro

Background: Since THERE is currently no WXS support in Taro (Taro #2959), I could not directly write WXS code in my project and ask Taro to compile it into WXML for me. So it’s going to have to be a little tricky, and hopefully in the future Taro will support WXS.

If you are using native applets, refer directly to WXS and WXS response events. If you are using other frameworks, refer to this article.

Code before optimization

Before optimization, setState was used to dynamically update x and Y coordinate values, so as to achieve the dragging effect with movable-view.

To optimize

Firstly, we need to get rid of the movable-view component, because it is impossible to use movable-View and WXS to reduce the number of paths for data transmission. Secondly, movable-View is an animation made with CSS, so we can replace it with position: Absolute. Dynamically set the top&left value in WXS to achieve the movable-view effect.

Second, create a motion. WXS script file in the directory of the corresponding component (component or page using WXS), which is used to dynamically set the top&left coordinate values of the nodes that need to be animated.

If you do not find the move. WXS file in the compiled component directory at compile time, you can refer to copy for configuration. Source taro# 2959

Finally, move. WXS is introduced under the corresponding JSX and is bound to the TouchMove event.

Problems with the use of Taro

When the author compiled this article, Taro was not a great supporter of WXS, but only managed to optimize the frame rate with WXS. However, for now, Taro is ready to support them. Please check out Taro #2959. The author will keep an eye on Taro’s support for WXS in the future.

When I was using WXS, I had to use callMethod (see: WXS Response events) to call methods defined in the Taro class component. It was not possible to use them directly in the official tutorial. It needs to be used in a very ugly way like the following. Currently, the specific reason is unknown. It is estimated that Taro will compile differently for methods without binding events.

The online demo

After the above optimization, drag and drop animations on Android models will be much smoother. You can scan the small program code below to experience, the process is as follows:

  • Scan the applet code into the applet

  • Login applet

  • On the personal library page, scan the bar code behind the book to add several books

  • Long press and drag the book