Investigation on the Problem of Transition Animation Not Smooth on WeChat Mini Program
A few days ago, the test engineer reported that our Wechat Mini Program pull-down refresh animation is stuck on the Android phone.
We used a unified component, which runs smoothly on the simulator, iOS device, and web page. As an Android engineer, I took the time to investigate the reasons.
After some investigation, I located the problem to the height calculation part of the pull-down refresh process. More specifically, the problem should be the code that uses
Transition to change the height.
The framework of Wechat Mini Program is divided into App Service (逻辑层) and the View(视图层), the View is based on
WXSS, and the App Service is based on
setData is frequently called, the communication between the two layers can not keep up with the expected processing speed, which will cause the lag problem.
The WeChat document also lists a common requirement, there is a page which has 2 elements A and B, the user makes a
touchmove gesture on A and requires B to follow the movement. The basic solution is to let the event run as directly as possible in the View layer, rather than respond through the App Service.
Through the above description, we know that the problem of transition can be solved by using WXS.
Our project is written using Taro which does not support WXS for the time now.
An article on juejin.im tried to include WXS while using Taro, see here
However, the use of WXS is relatively intrusive to the current pull-down refresh implementation. I checked several Mini Program applications like Baidu Tieba, Sina Weibo. None of them implemented smooth pull-down animation.
Considering the development cost and interaction effects, we decided not to invest time to solve the problem.
- Recommendations of WeChat Mini Program performance optimization(https://developers.weixin.qq.com/miniprogram/dev/framework/performance/tips.html)
- WXS respond event(https://developers.weixin.qq.com/miniprogram/dev/framework/view/interactive-animation.html)
- Optimization of frame problem when dragging movable-view in Wechat Mini Program(https://juejin.im/post/5cd18bb86fb9a0325031c8e1)
- Using WXS in Taro? (https://github.com/NervJS/taro/issues/2959)