一、 问题：
在涂鸦小程序中开发过程中，有时UI会提供给我们一些 Lottie（https://cloud.tencent.com/developer/article/1547747） 动画，从实际交互反馈来看如果 单个页面中Lottie 动画数多的话 卡顿问题比较明显，为探究如何能够更好的优化页面体验，我们对比测试了常见动画方式： Lottie 和 gif 分别对涂鸦小程序页面的性能影响
二、 性能对比：
2.0 对比方案
在保持同一环境下（同机型同面板同个数）统计观察动画运行时页面 FMP（视图层） 和 KB（视图层和逻辑层） 指标来反应操作的流畅程度
● 机型：小米10S
2.1 对比结果
2.1.1 1个动画
● gif
○ FMP - FMP - 1699ms （10次平均）
○ KB - 短时内 3KB * 1次
● lottie
○ FMP - 1142 ms（10次平均）
○ KB - 短时内 34KB * 1次
2.1.2 3个动画
● gif
○ FMP - 1745ms （10次平均）
○ KB - 短时内 3KB * 2次
● lottie
○ FMP - 1218 ms（10次平均）
○ KB - 短时内 34KB * 3次
2.1.3 5个动画
● gif
○ FMP - 1753 ms （10次平均）
○ KB - 短时内 4KB * 2次
● lottie
○ FMP - 1242 ms（10次平均）
○ KB - 短时内 34KB * 5次
2.1.4 8个动画
● gif
○ FMP - 1833 ms （10次平均）
○ KB - 短时内 5KB * 2次
● lottie
○ FMP - 1249 ms（10次平均）
○ KB - 短时内 34KB * 8次
2.1.5 12个动画
● gif
○ FMP - 1826 ms （10次平均）
○ KB - 短时内 9KB * 2次
● lottie
○ FMP - 1453 ms（10次平均）
○ KB - 短时内 34KB * 12次
2.1.6 20个动画
● gif
○ FMP - 1856 ms （10次平均）
○ KB - 短时内 17KB * 2次
● lottie
○ FMP - 1636 ms（10次平均）
○ KB - 短时内 34KB * 20次
三、 结论：
● Lottie 和 gif 个数与 FMP 指标影响不明显；
● gif 个数对于性能的影响要远远小于 Lottie 个数的增加， 当Lottie个数达到3个时卡顿已经比较明显。
● 从 KB 指标来看， Lottie 个数越多，短时间内波形占据的面积越大（如图1），意味着传输的数据越多，对于页面的体验会有明显影响，瞬时的高数据量（如图2）不会影响体验
● 综上：
○ 不建议在单个页面中使用过多的 Lottie 动画，一般不超过3个.
○ gif 对于性能的消耗要远小于 Lottie
四、 优化方案：
4.1 个数
● 如果要使用lottie 方案进行展示动画时，建议 lottie 个数不超过3个
● gif 个数不超过25个，建议开启懒加载模式， 如果超过
○ 从交互入手
■ 分页\分组，跳转新页面
○ 从渲染个数 - （可采用虚拟列表，不太建议，从交互上尽量避免一屏过多的图片）
■ 当前可见的gif才会渲染
4.2 类型
● 优先使用 gif 方案, lottie 方案由于每个Lottie 动画都是一个单独的 Canvas， 对于小程序来说性能压力比较大
○ 如果UI提供了Lottie文件，可转换为gif
■ 参见：lottie 转为 gif 的方法
4.3 CDN
● 可将静态资源存在CDN上优化拉取耗时，首次耗时过长的话，可以增加本地默认图片，后续懒加载（针对图片）
