使用Flutter, 花了大半年的时间开发了exping. 上线后, 当周登上了 Apple Store 推荐榜单.

IMG_0111.PNG

感谢大家的厚爱. 但同时也暴露出它的不足: 页面浏览出现卡顿, 掉帧, 有了 “Flutter 体验真差, 比原生差得远” 等类似评价.

当初选择Flutter, 就是看中它的跨平台优势, 极大降低开发成本. (两个开发童鞋, 前后端(打杂)全包~).

现在上线了, 深受大家喜爱, 那就必须, 撸起袖子, 搞它!!! (避免饭碗不保)


APP首次运行出现各种卡顿

收到最多反馈, 就是各种页面卡顿... 产品,测试,开发 全都疑惑: ~为啥我们没觉得卡😅...

经过跟用户大佬们的再三讨教(掰扯), 原来是首次打开卡顿, 重新进入又又正常了. 原来是我们被”卡”习惯了🥶.

之所以会出现这类问题, 套用官方解释: SkSL着色器编译卡顿

首次运行App, 进入页面时, 需要先对页面所使用着色器进行编译, 再渲染页面. 那要解决这个问题, 就是对页面的所用着色器进行预热(预编译).

Flutter 官网给出了具体解决方案:

Reduce shader compilation jank on mobile

来自Flutter官网的对比图

来自Flutter官网的对比图

操作步骤

  1. 使用 --cache-sksl 运行, 用于捕获着色器 (直接命令行运行)
flutter run --profile --cache-sksl
  1. 运行后, 对APP有卡顿的页面, 都浏览一遍. 元素比较多的页面, 可以多打开几次, 特别有复杂动画的页面.
  2. 打开页面后, 按下大写的 M , (注意是大写~), 会在项目目录生成 flutter_01.sksl.json, 这个文件记录捕获到的着色器.
Powered by Fruition