借助友盟+U-APM找出uniapp移动端崩溃的问题

项目背景:

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

挑战:

为迎合智慧校园这一概念,我们在APP主页引入了,校园新闻这一板块,在主页载入时,就会通过uniapp自带的请求函数获取最新校园信息,但在此过程中,我们发现,应用会出现异常的卡顿,甚至崩溃。
借助友盟+U-APM找出uniapp移动端崩溃的问题_第2张图片

解决方案:

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

总结:

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

你可能感兴趣的:(借助友盟+U-APM找出uniapp移动端崩溃的问题)