「本文已参与好文召集令活动,点击查看:后端、大前端双赛道投稿,2万元奖池等你挑战!」
一、 Keframe 反馈与升级
在月初发布的 已开源!Flutter 流畅度优化组件 Keframe ,至今已获得 200+ star,收到了大家很多的反馈。
在 web 端似乎也有不错的体验
提出的 5 个 issue 都已跟进并解决,其中一个功能上的 BUG 是部分场景下会出现 占位不消失 已解决,使用最新版本 2.0.2
或者 1.0.2
即可。
同时也得到了很多优秀开发者实际的优化效果,我整理后与大家一起分享 keframe 实际落地的 case,并收录至 flutter_apodidae(Flutter 中的优化合集,向大家分享各种 Flutter 的优化技巧)。
二、 合集展示
注:demo 均为开发阶段录制,可能还未上线。
1. 一秒语音包变声器 App
Ruiyu 独立开发的 一秒语音包变声器,市场累计下载量 100w+,获得过华为耀星 App 奖
下面是使用 keframe 前后统计 300 帧的对比:
卡顿帧从平均 60 帧出现一次优化为 300 帧中出现一次,轻微卡顿由平均 7 帧一次优化为未出现,流畅占比从 36.3% 提高到 74.7%。
数据展示 Mate30 pro
测试机型:Mate30 pro
优化前 | 优化后 |
---|---|
优化前 | 优化后 | |
---|---|---|
平均多少帧出现一帧卡顿 | 60 | 300 |
平均多少帧出现一帧轻微卡顿 | 7.0 | 未出现轻微卡顿 |
最大耗时 | 146.0ms | 76.0ms(图中展示有误) |
平均耗时 | 25.2ms | 18.3ms |
流畅帧占比 | 36.3% | 74.7% |
操作 Demo(gif 帧率只有25)
优化前 | 优化后 |
---|---|
这个 Case 中,卡顿大多发生在 TAB 切换的场景。因为系统会在瞬间完成页面渲染,如果页面结构复杂,在 mate30 pro 这样的高端设备上也容易引起卡顿。通过 keframe 对页面中每一个模块进行分帧加载,能有效优化切换时的卡顿。并且从体感而言,整个过渡任然非常自然。
2. 匿名 A 岛
「麋鹿君」,一个还在战斗的独立开发,上架了多款精美的应用,AppStore & GooglePlay
开发者反馈:
这是一款刚刚开始的 A 岛第三方客户端项目,搭配 Keframe 框架后在测试用机(乐视1s)上有惊人表现,效果对比「惨烈」。
数据展示 乐视 1S & iPhone 11
下面是使用 keframe 前后统计 100 帧的对比,测试机型:乐视 1S。
优化前 | 优化后 |
---|---|
这个优化效果我觉得不需要任何多余的说明,整个 App 从几乎不可用状态到 100 帧中 0 卡顿。这也是 keframe 优化的最大价值,让一些复杂页面在中低端设备上从卡顿到流畅运行的状态。
同时还有 iPhone11 上的演示数据
优化前 | 优化后 |
---|---|
性能较好的设备本身卡顿也几乎不存在卡顿,而 keframe 则更进一步保证了每一帧的流畅。
操作 Demo(gif 帧率只有25)
优化前 | 优化后 |
---|---|
3、百灵创作
这是一款还在开发阶段的 App ,希望做一款简约而不简单,自由又安全的专业码字软件。
数据展示 小米 9
下面是使用 keframe 前后统计 300 帧的对比,测试机型:小米 9。
优化前 | 优化后 |
---|---|
卡顿峰值从 244.0ms 降低到了 126.0ms ,从平均 50 帧出现一次卡顿优化为平均 150 帧出现一次卡顿,300帧平均耗时从 22.4ms 优化至 18.5 ms。
操作 Demo(gif 帧率只有25)
优化前 | 优化后 |
---|---|
有关 keframe 的更多用法请查看:
github 地址:github.com/LianjiaTech…
pub 查看:pub.dev/packages/ke…
Dont forget star !
我的使用技巧
我日常的使用经验来看,对于一些分页的列表,我会将 ListView 的 cacheExtent
设置为 700,同时加上渐变动画,在中低端设备上能得到明显的体验优化,而高端设备上用户几乎无感知加载。
而对于详情这一类列表项内容有限的页面,我会将 cacheExtent
直接调到 double.infinity
,打开页面即进行分帧加载,这样在滑动过程中也能带来最好的体验。
再次感谢提供案例的三位开发者,能感受到每个开发者对自己的 app 倾注了大量的心血,做得都非常精美。
最后,非常欢迎分享你的优化演示或者优化技巧,所有合集我均会收录到 糖果 🍬 中的 flutter_apodidae
下个系列我预计会花 4-6 期从计算机网络原理,到 Dart 中的网络编程,最后再到 Dio 的架构设计,通过原理分析 + 练习的方式,带大家由浅入深的掌握 Dart 中的网络编程与 Dio 库的设计。
如果遇到了任何问题与建议,欢迎在评论区或者公众号联系我,或者 issue 和 pr。
公众号:进击的Flutter或者 runflutter 里面整理收集了最详细的Flutter进阶与优化指南,欢迎关注。