研发团队在开发过程中难免会遇到一些性能问题,这次我们团队在性能优化当中也遇到一些问题,借助友盟进行数据分析,u-apm体现出APP的整体运行情况,让我们团队能更加注重逻辑的优化,是值得推荐的优质工具!
一、项目背景
登录页面,底层背景添加多张静态图片,能够从下网上流畅移动,达到一个给用户相对体验比较好的视觉效果。
如果图片移动不恰当,那么就会给人造成一种不舒服的视觉效果,有一种卡顿不好体验
目标框架:APP+H5,实际就是使用静态页面html开发
二、我们遇到的挑战
解决多张静态图片移动卡顿的问题,那么就需要有一定的逻辑处理基础,编写代码到一个让图片流畅的过程。
对于初学者来说,找到一个平滑移动的方法,是一个不小的挑战。此时,借助一款优质的工具来进行分析,也是事半功倍的方法。
三、解决步骤
图片布局和样式设置
假设有5张图片,设置图片的样式为位置为position:absolute相对布局
图片初始位置计算
根据图片高度,由上往下依次给图片设定一定的top值
设置好时间值、速度值和总移动值
在间隔极短的60毫秒里移动0.6px像素值,那么在每一秒内的移动就会显得非常流畅和平滑,就不会出现移动图片有眩晕和卡顿的现象
关键代码
四、项目总结
任何一款高效的APP都需要从小功能小细节打磨开始,这里虽然没有太高深的技术亮点和难点,但是就是把这些小功能小细节完善好,也是对用户一个非常好的用户体验。
五、友盟+u-apm产品体验内容
1、友盟+u-apm轻量型监测工具简介
友盟团队根据性能稳定问题研发出U-APM应用性能监控平台,通过轻量级的集成接入即可拥有实时、可靠、全面的应用崩溃、ANR、自定义异常等捕获能力,及卡顿、启动分析、内存分析、网络分析等性能监测能力,支持多场景、多通道智能告警监测,帮助开发者高效还原异常、卡顿用户的访问路径和业务现场,缩短故障排查时间。提供云真机测试能力,助力开发者从研发测试质量验收到线上问题复现排查,保障应用品质,提升测试效率。在云真机测试期间自动采集崩溃信息,提供详尽的崩溃报告协助筛查,真正实现监控测试全流程深度打通。
2、集成接入友盟+应用性能监控平台U-APM
创建应用
友盟统计
集成接入使用体验总结与分享
六、总结
在日常开发工作中,拥有一款优质的辅助工具是很有必要的,如友盟+u-apm轻量型监测工具,多维度的呈现出APP的整体运行情况。让我们团队能更加专注业务逻辑的修改和完善,提高了用户体验感!