巧用友盟+U-APM 解决uniapp移动端崩溃的问题

本文涉及的产品
应用实时监控服务ARMS - 应用监控,每月50GB免费额度
简介: 本案例是为我校订制的智慧校园APP,由于我校并没有官方的校园APP所以导致学生需要频繁登陆教务系统网站,且因本校教务系统网站对移动端的兼容不是很完善,所以导致部分信息无法清晰查看,基于此,本项目应运而生。在开发工具方面,选择了使用uniapp,uniapp是一个使用Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝)、快应用等多个平台。这能为我们大幅度减少开发时间,提高开发效率。

项目背景:

本案例是为我校订制的智慧校园APP,由于我校并没有官方的校园APP所以导致学生需要频繁登陆教务系统网站,且因本校教务系统网站对移动端的兼容不是很完善,所以导致部分信息无法清晰查看,基于此,本项目应运而生。在开发工具方面,选择了使用uniappuniapp是一个使用Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOSAndroidWeb(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝)、快应用等多个平台。这能为我们大幅度减少开发时间,提高开发效率。

1.jpg

(部分信息显示不全)


挑战:

为迎合智慧校园这一概念,我们在APP主页引入了,校园新闻这一板块,在主页载入时,就会通过uniapp自带的请求函数获取最新校园信息,但在此过程中,我们发现,应用会出现异常的卡顿,甚至崩溃。

2.jpg

解决方案:

起初我们认为是后端发送的数据过多导致的(最初后端一次返回25条新闻资讯),后将规模变小,一次返回15条数据,情况有所好转,但任然会出现略微卡顿,为了找到问题的所在我们使用了友盟在uniapp官方插件市场投放的“友盟+ U-APM 应用性能监控”经过大量观察页面渲染数据,我们发现应用在冷启动和首次启动阶段存在较大的延时,并即使获取到了后端反馈的数据,前端仍需要几秒钟的渲染时间,这就很有意思了,在合理的网络环境下,一段不过20k的数据不应该需要这么长的时间来渲染,所以我们开始将目标由最开始的数据量转移到了组件上,uniapp存在vuenvue两种页面方式,其中vue是基于webview的渲染方式,而nvue则是原生渲染,这次我们使用了uniapp的原生组件list这是一种在不可见部分的渲染资源回收有特殊处理,在实测中他的性能远优于传统的scroll-view,在使用list组件过后,发现卡顿感明显消失,通过对比友盟数据,性能提升量相当可观。

 

总结:

通过本案列,我们第一次接触到了“友盟+ U-APM 应用性能监控”,根据他给与的数据,我们从原有的数据量角度,转移到了,原生组件的渲染问题,他为我们提供了一种寻找问题的捷径,让我们面对问题,不再迷茫,不再困惑。



作者:刘劲松

昆明理工大学津桥学院软件工程大四学生

百度飞桨开发者技术专家(PPDE

相关实践学习
通过云拨测对指定服务器进行Ping/DNS监测
本实验将通过云拨测对指定服务器进行Ping/DNS监测,评估网站服务质量和用户体验。
相关文章
|
5月前
|
前端开发 JavaScript
uniapp移动端悬浮按钮(吸附边缘)
uniapp移动端悬浮按钮(吸附边缘)
271 0
|
移动开发 小程序
小程序-uniapp:URL Link / 适用于在移动端 从短信、邮件、微信外网页 等场景打开小程序任意页面
小程序-uniapp:URL Link / 适用于在移动端 从短信、邮件、微信外网页 等场景打开小程序任意页面
465 0
|
4月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的移动端购物系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的移动端购物系统附带文章和源代码部署视频讲解等
44 4
基于ssm+vue.js+uniapp小程序的移动端购物系统附带文章和源代码部署视频讲解等
|
4月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的哈尔滨中心医院用户移动端附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的哈尔滨中心医院用户移动端附带文章和源代码部署视频讲解等
31 5
|
2月前
|
设计模式 开发框架 前端开发
基于SqlSugar的开发框架循序渐进介绍(20)-- 在基于UniApp+Vue的移动端实现多条件查询的处理
基于SqlSugar的开发框架循序渐进介绍(20)-- 在基于UniApp+Vue的移动端实现多条件查询的处理
|
3月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的哈尔滨中心医院用户移动端的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的哈尔滨中心医院用户移动端的详细设计和实现(源码+lw+部署文档+讲解等)
28 0
|
移动开发 JavaScript 前端开发
探究Uniapp在移动端开发中的应用
探究Uniapp在移动端开发中的应用
183 0
|
移动开发 前端开发 weex
uniapp调试基座安装与移动端应用选型
uniapp调试基座安装与移动端应用选型
uniapp调试基座安装与移动端应用选型
|
监控 测试技术 API
移动端性能监测工具篇之U-APM
移动端性能监测工具篇之U-APM
356 0
|
运维 监控 测试技术
巧用友盟+U-APM 实现移动端性能优化—启动速度
移动端性能对用户体验、留存有着至关重要的影响,一个体验良好的应用,只有功能健全还不够,以下是我在性能优化上总结的几点:启动速度优化、流畅度优化、资源优化、内存优化、APK 体积优化。今天先聊聊,启动速度的那些事。
巧用友盟+U-APM 实现移动端性能优化—启动速度

热门文章

最新文章

下一篇
无影云桌面