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