项目背景：

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

（部分信息显示不全）

挑战：

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

解决方案：

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

总结：

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

作者：刘劲松

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

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