├── README.md └── 第一期 keframe └── keframe1.md /README.md: -------------------------------------------------------------------------------- 1 | # flutter_apodidae 2 | 3 | ![image](https://user-images.githubusercontent.com/40540394/124585416-d6c33280-de87-11eb-8e4f-d0a8f9fdf415.png) 4 | 5 | 项目名 Apodidae (雨燕)是飞翔速度最快的鸟类，与 Flutter (颤动)不谋而合。 6 | 7 | 这个项目用于收录 Flutter 中的优化合集，向大家分享各种 Flutter 的优化技巧。 8 | 9 | 如果你想分享你的优化效果，或者让你的 App 被更多人看到，非常欢迎你 show 出你的 **代码/录屏**。 10 | 11 | 如果你遇到了优化相关问题，提出 issue。 12 | 13 | 第一期已上线，一起来看看 3 位开发者具体在项目中的效果：[keframe 第一期优化](https://github.com/fluttercandies/flutter_apodidae/blob/master/%E7%AC%AC%E4%B8%80%E6%9C%9F%20keframe/keframe1.md) 14 | 15 | 我会收集优化 [keframe](https://github.com/LianjiaTech/keframe) 的优化 case (录屏或者代码)整合到项目中，同时也会尝试，对一些已有的 flutter example 进行 [keframe](https://github.com/LianjiaTech/keframe) 优化。 16 | 17 | 所以如果你手上有不错的优化效果，非常欢迎你录制优化前后的对比视频以及（devtools 或者 [fps_monitor](https://pub.dev/packages/fps_monitor) 中的性能截图）欢迎发送到我的邮箱 762579473@qq.com/公众号/QQ 与我联系。所有收录的项目，我都会贴上你的推荐信息为你引流。 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /第一期 keframe/keframe1.md: -------------------------------------------------------------------------------- 1 | ## 合集展示 2 | 3 | 注：Github 限制 gif 大小，超过 10 mb 无法上传。 4 | 5 | ### 1. 一秒语音包变声器 App 6 | 7 | [瑞宇](https://github.com/zhangruiyu) 独立开发的 **一秒语音包变声器**，市场累计下载量 100w+，获得过华为耀星 App 奖 8 | 9 | ![59E6C54EBCCF56E6B7744292BB3AB70D.jpg](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/81a515ad92a1447e9bd014f5d80bfc42~tplv-k3u1fbpfcp-watermark.image) 10 | 11 | 下面是使用 keframe 前后统计 300 帧的对比： 12 | 13 | >**卡顿帧从平均 60 帧出现一次优化为 300 帧中出现一次，轻微卡顿由平均 7 帧一次优化为未出现，流畅占比从 36.3% 提高到 74.7%**。 14 | 15 | #### **数据展示** 16 | 17 | 测试机型：Mate30 pro 18 | | 优化前 | 优化后 | 19 | | ------------------------------------------------------------ | ------------------------------------------------------------ | 20 | | ![Screenshot_20210712-152724.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/51fd23f6358040ebbc5f5a14a33416b0~tplv-k3u1fbpfcp-watermark.image) | ![Screenshot_20210712-152659.jpg](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/79cbdbdb48a1437181bee07be62d12cd~tplv-k3u1fbpfcp-watermark.image) | 21 | 22 | | | 优化前 | 优化后 | 23 | | -------------------------- | ------- | ---------------------- | 24 | | 平均多少帧出现一帧卡顿 | 60 | 300 | 25 | | 平均多少帧出现一帧轻微卡顿 | 7.0 | 未出现轻微卡顿 | 26 | | 最大耗时 | 146.0ms | 76.0ms（图中展示有误） | 27 | | 平均耗时 | 25.2ms | 18.3ms | 28 | | 流畅帧占比 | 36.3% | 74.7% | 29 | 30 | 这个 Case 中，卡顿大多发生在 TAB 切换的场景。因为系统会在瞬间完成页面渲染，如果页面结构复杂，在 mate30 pro 这样的高端设备上也容易引起卡顿。通过 keframe 对页面中每一个模块进行分帧加载，能有效优化切换时的卡顿。并且从体感而言，整个过渡任然非常自然。 31 | 32 | *** 33 | 34 | ### 2. 匿名 A 岛 35 | 36 | 「麋鹿君」，一个还在战斗的独立开发，上架了多款精美的应用，[AppStore](https://apps.apple.com/cn/developer/嘉楠-孙/id1480541469) & [GooglePlay](https://play.google.com/store/apps/dev?id=5706067037523299093) 37 | 38 | image.png 39 | 40 | 41 | > 开发者反馈：这是一款刚刚开始的 A 岛第三方客户端项目，搭配 Keframe 框架后在测试用机（乐视1s）上有惊人表现，效果对比「惨烈」。 42 | 43 | #### 数据展示 44 | 45 | 下面是使用 keframe 前后统计 100 帧的对比，测试机型：乐视 1S。 46 | 47 | | 优化前 | 优化后 | 48 | | ------------------------------------------------------------ | ------------------------------------------------------------ | 49 | | 20210712_173854_rmscr.jpg | 20210712_173313_rmscr.jpg | 50 | 51 | 这个优化效果我觉得不需要任何多余的说明，**整个 App 从几乎不可用状态到 100 帧中 0 卡顿**。这也是 keframe 优化的最大价值，让**一些复杂页面在中低端设备上从不可用到流畅运行的状态**。 52 | 53 | 同时还有 iPhone11 上的演示数据 54 | 55 | | 优化前 | 优化后 | 56 | | --- | --- | 57 | | ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/45431165cbfe4b0a821dbb02f537aaf3~tplv-k3u1fbpfcp-watermark.image) | ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/15cd40b851b64feba7bc468dc78629a2~tplv-k3u1fbpfcp-watermark.image)| 58 | 59 | 性能较好的设备本身卡顿也几乎不存在卡顿，而 keframe 则更进一步保证了每一帧的流畅。 60 | 61 | 62 | ### 3、百灵创作 63 | 这是一款还在开发阶段的 App ，希望做一款简约而不简单，自由又安全的专业码字软件。 64 | #### 数据展示 65 | 66 | 下面是使用 keframe 前后统计 300 帧的对比，测试机型：小米 9。 67 | 68 | | 优化前 | 优化后 | 69 | | ------------------------------------------------------------ | ------------------------------------------------------------ | 70 | | ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/49d6c70bf34d4bea9c0a08378b630087~tplv-k3u1fbpfcp-watermark.image)| ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a02d3c680c7b412e83c2fb8662281ffc~tplv-k3u1fbpfcp-watermark.image) | 71 | 72 | **卡顿峰值从 244.0ms 降低到了 126.0ms ，从平均 50 帧出现一次卡顿优化为平均 150 帧出现一次卡顿，300帧平均帧率从 22.4ms 优化至 18.5 ms**。 73 | 74 | 75 | 有关 keframe 的更多用法请查看： 76 | 77 | github 地址：[https://github.com/LianjiaTech/keframe](https://github.com/LianjiaTech/keframe) 78 | 79 | pub 查看：[https://pub.dev/packages/keframe](https://pub.dev/packages/keframe) 80 | 81 | > **Dont forget star !** 82 | 83 | ## 84 | 85 | 我日常的使用经验来看，对于一些分页的列表，我会将 ListView 的 `cacheExtent` 设置为 700，同时加上渐变动画，在中低端设备上能得到明显的体验优化，而高端设备上用户几乎无感知加载。 86 | 87 | 而对于详情这一类列表项内容有限的页面，我会将 `cacheExtent` 直接调到 `double.infinity`，打开页面即进行分帧加载，这样在滑动过程中也能带来最好的体验。 88 | 89 | 再次感谢提供案例的三位开发者，能感受到每个开发者对自己的 app 倾注了大量的心血，做得都非常精美。 90 | 91 | 最后，非常欢迎分享你的优化演示或者优化技巧（不局限于 keframe），这个项目会持续跟进，欢迎你的关注。 92 | 93 | --------------------------------------------------------------------------------