[toc]

页面加载体验优化

一、页面初始加载优化

1、数据携带/数据参照

通过前一个页面的已获得数据，对所进入的新页面中的数据进行预填充。

eg1:商品列表 —> 商品详情：使用数据携带

eg2:愿望星count个数：通过count的0与非0，知晓所进入的页面初始状态更有可能是哪种状态

1、如果所进入的页面没有缓存数据，则携带的数据在进入的时候直接使用，后台接口返回实时数据后，再更新

2、如果所进入的页面有缓存数据，则携带的数据只能给缓存数据，而不能是后台接口返回的实时数据

2、管理的数据的缓存

2.1、普通数据的缓存

通过缓存框架，将数据缓存起来(key需携带uid)，下次界面展示时候，优先从缓存中获取。

附：缓存框架详见：flutter_cache_kit使用文档

2.2、管理数据的缓存

建立Service层，管理用户所有数据的变动。

好处：与普通数据的缓存相比，能够在将来增加数据变动时候，通过本地通知系统，告知相关页面更新相应数据，而不用等到重新下载后才能显示已知道会更新的数据。

使用要点：

修改的时候，同步数据；下次界面需要数据，优先从用户管理服务中获取初始数据

eg1:用户愿望单收藏、商品收藏、品牌收藏、足迹数据

eg2:用户会员中心数据

3、默认数据

如果没有从前一页携带数据过来，则使用与产品约定的默认数据来加载。

if (携带数据) return 携带的.orderCount; 
if (管理数据) return servier.orderCount; 
if (默认数据) return default_orderCount;

4、预览页：美团/饿了么的骨架屏灰底效果

对携带的数据与默认数据中相同的对象，使用携带的数据替换掉，一起整合成初始默认数据（携带的数据优先级高）。

5、添加请求加载圈

6、网络接口的缓存数据

页面处理优化及处理过程中的内容（图片）加载优化如下图所示：

图片来源可查看 《app启动与页面加载.graffle》中的【二、页面加载】版面

从上图中，可以看出弱网情况下，我们可以针对不同的网络：做不同超时，重试设置，以及取不同质量的图片数据。

二、图片优化

图片优化，请查看我的另一篇文章：图片框架.md

图片高磁盘占用，请查看我的另一篇文章：《高磁盘占用的排查与优化.md》

三、网络优化

api数据缓存，请查看我的另一篇文章：《网络框架.md》

弱网优化，请查看我的另一篇文章：《弱网优化空间探索.md》

四、按钮点击区域优化

eg：返回键的点击

防抖(立即执行）：

五、样式

loading加载动画按需添加

返回按钮统一

toast提示统一

底部弹窗统一

六、底层异常处理

1、图片的404错误

错误示例：

https://img.alicdn.com/bao/uploaded/i1/1799996758/TB2YYnmoFXXXXatXFXXXXXXXXXX_!!1799996758.jpg

错误提示：

flutter: CacheManager: Failed to download file from https://img.alicdn.com/bao/uploaded/i3/791232018/TB2_zAjsVXXXXaNXXXXXXXXXXXX_!!791232018.jpg with error:

修改方案：

Flutter cached_network_image图片缓存异常/加载失败优化

七、代码优化

屏幕适配写法

iOS 等比例UI适配方案

八、其他预加载优化

1、列表预加载

1.1、轮播图列表预加载

预加载下一张(不是全部)

2、视频预加载

3、全局WebView

End