Keframe 流畅度优化实践合集

8,288

「本文已参与好文召集令活动,点击查看:后端、大前端双赛道投稿,2万元奖池等你挑战!

一、 Keframe 反馈与升级

在月初发布的 已开源!Flutter 流畅度优化组件 Keframe ,至今已获得 200+ star,收到了大家很多的反馈。

image.png

在 web 端似乎也有不错的体验

image.png

提出的 5 个 issue 都已跟进并解决,其中一个功能上的 BUG 是部分场景下会出现 占位不消失 已解决,使用最新版本 2.0.2 或者 1.0.2 即可。

同时也得到了很多优秀开发者实际的优化效果,我整理后与大家一起分享 keframe 实际落地的 case,并收录至 flutter_apodidae(Flutter 中的优化合集,向大家分享各种 Flutter 的优化技巧)。


二、 合集展示

注:demo 均为开发阶段录制,可能还未上线。

1. 一秒语音包变声器 App

Ruiyu 独立开发的 一秒语音包变声器,市场累计下载量 100w+,获得过华为耀星 App 奖 59E6C54EBCCF56E6B7744292BB3AB70D.jpg

下面是使用 keframe 前后统计 300 帧的对比:

卡顿帧从平均 60 帧出现一次优化为 300 帧中出现一次,轻微卡顿由平均 7 帧一次优化为未出现,流畅占比从 36.3% 提高到 74.7%

数据展示 Mate30 pro

测试机型:Mate30 pro

优化前优化后
Screenshot_20210712-152724.jpgScreenshot_20210712-152659.jpg
优化前优化后
平均多少帧出现一帧卡顿60300
平均多少帧出现一帧轻微卡顿7.0未出现轻微卡顿
最大耗时146.0ms76.0ms(图中展示有误)
平均耗时25.2ms18.3ms
流畅帧占比36.3%74.7%

操作 Demo(gif 帧率只有25)

优化前优化后
1 before.gif2 after.gif

这个 Case 中,卡顿大多发生在 TAB 切换的场景。因为系统会在瞬间完成页面渲染,如果页面结构复杂,在 mate30 pro 这样的高端设备上也容易引起卡顿。通过 keframe 对页面中每一个模块进行分帧加载,能有效优化切换时的卡顿。并且从体感而言,整个过渡任然非常自然。


2. 匿名 A 岛

「麋鹿君」,一个还在战斗的独立开发,上架了多款精美的应用,AppStore & GooglePlay

image.png

开发者反馈:

这是一款刚刚开始的 A 岛第三方客户端项目,搭配 Keframe 框架后在测试用机(乐视1s)上有惊人表现,效果对比「惨烈」。

数据展示 乐视 1S & iPhone 11

下面是使用 keframe 前后统计 100 帧的对比,测试机型:乐视 1S。

优化前优化后
20210712_173854_rmscr.jpg20210712_173313_rmscr.jpg

这个优化效果我觉得不需要任何多余的说明,整个 App 从几乎不可用状态到 100 帧中 0 卡顿。这也是 keframe 优化的最大价值,让一些复杂页面在中低端设备上从卡顿到流畅运行的状态

同时还有 iPhone11 上的演示数据

优化前优化后
image.pngimage.png

性能较好的设备本身卡顿也几乎不存在卡顿,而 keframe 则更进一步保证了每一帧的流畅。

操作 Demo(gif 帧率只有25)

优化前优化后
1 b.gif1a.gif
IP11—before.gifkeframe- IP11.gif

3、百灵创作

这是一款还在开发阶段的 App ,希望做一款简约而不简单,自由又安全的专业码字软件。

数据展示 小米 9

下面是使用 keframe 前后统计 300 帧的对比,测试机型:小米 9。

优化前优化后
image.pngimage.png

卡顿峰值从 244.0ms 降低到了 126.0ms ,从平均 50 帧出现一次卡顿优化为平均 150 帧出现一次卡顿,300帧平均耗时从 22.4ms 优化至 18.5 ms

操作 Demo(gif 帧率只有25)

优化前优化后
未使用keframe.gif已使用keframe.gif

有关 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进阶与优化指南,欢迎关注。