Flutter卡顿优化总结

714 阅读5分钟
序号优化方法卡顿原理修改后影响面测试影响范围未验证UI/UX未通过计划上线日期上线项情况修改和影响技术参数影响体感影响
2不要使用高斯模糊(毛玻璃)效果导致GPU工作量大,GPU卡顿9.21已决定上线UI同学选择替代方案修改“推荐“页合集类型卡片“推荐页“外社区业务模块中仍有4处使用影响:大影响:大
3不使用颜色渐变导致GPU工作量大,GPU卡顿9.21上线修改“推荐页“使用点使用点:少单个点技术影响:小综合影响:小影响:小
5GSImage组件要指定宽高,不能仅指定showImageW参数导致layout(布局)计算量大,CPU负载大图片组件使用点多影响面大,降低影响范围9.21部分点采用替换组件上线GSNetworkImage使用点:较多单个点技术影响:小综合影响:大影响:大
6替换GSImage组件9.21部分使用点上线
7needPixelRatio参数置falseGSImage组件会根据needPixelRatio参数重新计算宽高导致图片占用内存大图片组件使用点多影响面大,降低影响范围9.21部分使用点上线
8图片格式选用webp格式,质量参数80%不影响清晰度的前提下减少内存占用图片组件使用点多影响面大,降低影响范围9.21部分使用点上线
11防止空刷新现象发生原有使用开源组件库bug较多CPU/GPU不断运转导致帧率数据异常,CPU使用率增大涉及页面较多(59个页面)降低影响范围9.21部分使用点上线目前仅修改“推荐“,“新奇“页1 导致技术指标异常升高无法衡量实际情况2 额外占用CPU/GPU综合影响:中影响:中
14build()中不要进行耗时操作9.21部分使用点上线调整具体代码综合影响:中需开发人员日常工作中精益求精
19减少UI层级/结构9.21部分使用点上线调整UI代码综合影响:中
20不要大圆角剪切高清大图切大圆角GPU计算量较大易造成卡顿通过贴框图间接实现圆角切图已上线
21替换SVG图为PNGSVG图GPU计算量较大,替换前后对比间右侧图片已上线
22优化组件GSNewsMediaWidget GSCircleMediaWidgetSmartNewsCellWidget替换优化等组件及相关逻辑部分上线SmartNewsCellWidget
SmartNewsMediaWidget
SmartCircleMediaWidget
SmartVideoCoverWidget
SmartImageGridWidget
SmartRecommentCollectCell
SmartSelectedCommentWidget
SmartImageRatioWidget
SmartFavoriteWidget
SmartAvatarWidget
SmartNicknameLogoWidget
SmartRadioTypeWidget
序号优化方法卡顿原理修改后影响面测试影响范围未验证UI/UX未通过计划上线日期上线项情况修改和影响技术参数影响体感影响
1不使用ClipRect、ClipRRect等ClipXxx族组件导致GPU计算量大,GPU卡顿图片无圆角视觉效果不佳未上线修改“推荐页“使用ClipRect、ClipRRect等ClipXxx族组件“推荐页“外社区业务模块中仍有大量使用使用点:多单个点技术影响:小综合影响:中影响:中
4不使用阴影导致GPU工作量大,GPU卡顿视觉效果不佳未上线修改“推荐页“使用点使用点:少单个点技术影响:小综合影响:小影响:小
9滑动阻尼(距离)优化原有使用开源组件库bug滑动距离变小新阻尼调节方法增大滑动距离,小卡顿问题显得更加突出,未上线1 smart_refresh组件库2 smart_refresh_header组件3 smart_load_footer组件4 smart_list_view组件对平滑度&帧率等技术指标影响小用户体感影响大
10自定义下拉刷新/上拉加载组件原有使用开源组件库bug较多同上技术指标影响小用户体感影响大
12Banner类组件持续运行视觉效果不佳(不播放)未上线调整组件播放策略
13搜索框检索词滚动视觉效果不佳(不播放)未上线调整组件播放策略
15BlocBuilder降低位置。配合Cubit拆分增加刷新区域导致刷新问题影响大未上线修改 “探索“-“推荐“-“推荐页下组件“ 页面更新流程&刷新范围综合影响:中需开发人员日常工作中精益求精
16尽量在子组件调用setState,刷新部分布局增加刷新区域导致刷新问题影响大未上线修改 “探索“-“推荐“-“推荐页下组件“ 页面更新流程
17删除不必要的setState增加不必要的刷新导致刷新问题影响大未上线修改 “探索“-“推荐“-“推荐页下组件“ 页面更新流程
18减少不必要的网络请求网络请求后往往会触发页面刷新降低影响范围未上线删除部分网络刷新触发点
20ListView等列表优化卡片类型各异导致无法通过固定高度的方法提高流畅性需要整体重新设计和重构
21框架优化底层渲染依赖flutter需要调整技术基座
22Flutter单线程模型大图下载时抢占CPU影响流畅度大图下载时抢占CPU影响流畅度1. flutter层多线程库开发1. 网络请求迁移到native层
23列表项索引编号跳跃是由页面刷新造成(业务逻辑)影响评估中
序号待跟进问题细节影响面现状备注
1小卡顿问题涉及点位分布广泛,排查耗时较多暂停
2分帧系统层返回索引编号跳跃,导致异常问题跟进中业界使用较多反馈较好,但在我司业务中使用时发现异常,需进一步跟进/适配
3异步多线程1 影响大改动大未上线2 系统提供的多线程库无法跨native调用Flutter技术模型默认为单线程模型,使用多线程需要开发/引入新的组件库