「本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，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进阶与优化指南，欢迎关注。
