共计 901 个字符，预计需要花费 3 分钟才能阅读完成。
我的项目背景：
本案例是为我校订制的智慧校园 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 利用性能监控”，依据他给与的数据，咱们从原有的数据量角度，转移到了，原生组件的渲染问题，他为咱们提供了一种寻找问题的捷径，让咱们面对问题，不再迷茫，不再困惑。
