Use Umeng+U-APM to find out the problem of uniapp mobile terminal crash

Background of the project:

This case is a smart campus APP customized for our school. Because our school does not have an official campus APP, students need to log in to the educational administration system website frequently, and because the school's educational administration system website is not very compatible with mobile terminals, some information is caused. It is impossible to see clearly. Based on this, this project came into being. In terms of development tools, I chose to use uniapp. Uniapp is a framework for developing all front-end applications using Vue.js. Developers write a set of codes that can be published to iOS, Android, Web (responsive), and various small programs ( WeChat/Alipay/Baidu/Toutiao/QQ/KaiShou/DingDing/Taobao), KuaiApp and other platforms. This can greatly reduce development time and improve development efficiency for us.

(Part of the information is not displayed completely)

challenge:

In order to cater to the concept of smart campus, we introduced the campus news section on the APP homepage. When the homepage is loaded, the latest campus information will be obtained through uniapp’s own request function, but in the process, we found that, The application will experience abnormal freezing or even crash.

solution:

At first we thought that it was caused by too much data sent by the backend (initially the backend returned 25 news information at a time), and then the scale became smaller, returning 15 data at a time. The situation has improved, but there will still be a slight freeze. In order to find the problem, we used the "Youmeng + U-APM Application Performance Monitoring" launched by the Uniapp official plug-in market. After a lot of observation page rendering data, we found that the application has a large Delay, and even if the back-end feedback data is obtained, the front-end still needs a few seconds of rendering time. This is very interesting. In a reasonable network environment, a piece of data of but 20k should not take such a long time to render , So we began to transfer the target from the initial amount of data to the component. Uniapp has two page methods, vue and nvue. Among them, vue is a rendering method based on webview, and nvue is native rendering. This time we use uniapp. Native component list This is a special treatment for the recovery of rendering resources in the invisible part. In the actual test, its performance is far better than the traditional scroll-view. After using the list component, it is found that the stuttering feeling has disappeared. Alliance data, the performance improvement is considerable.

Summarize:

Through this case, we came into contact with "Youmeng + U-APM Application Performance Monitoring" for the first time. According to the data he gave, we moved from the original data perspective to the rendering problem of native components. He helped us Provides a shortcut to find the problem, let us face the problem, no longer confused, no longer confused.