性能测试数据
测试手机：华为 Mate8
性能指标说明：
测试路径：
首页->聚合列表页->门店商详->商城首页->商城档期列表->商城商详
firstRender
| 页面 | Wall Duration | Self Time | FPS | CPU(%) | MEMORY(MB) |
|---|---|---|---|---|---|
| pages/index/index | 308.000 ms | 305.000 ms | 11~16 | 16 | 685 |
| pages/brandList/index | 136.000 ms | 135.000 ms | 25~60 | 16~24 | 526 |
| pages/productDetail/productDetail | 226.000 ms | 223.000 ms | 16 | 530 | |
| pages/mall/index | 134.000 ms | 134.000 ms | 51~59 | 18~29 | 562 |
| mall/brand/index | 98.000 ms | 98.000 ms | 17~60 | 11 | 596 |
| mall/productDetail/productDetail | 238.000 ms | 233.000 ms | 45~60 | 4.6 | 584 |
reRender
| 页面 | Wall Duration | Self Time | FPS | CPU(%) | MEMORY(MB) |
|---|---|---|---|---|---|
| pages/index/index | 3,413.000 ms | 3,317.000 ms | 8~60 | 24~29 | 525~649 |
| pages/brandList/index | 243.000 ms | 29.000 ms | 17~59 | 16 | 519 |
| pages/productDetail/productDetail | 194.000 ms | 172.000 ms | 43 | 555 | |
| pages/mall/index | 86.000 ms | 84.000 ms | 14~60 | 29 | 570 |
| mall/brand/index | 447.000 ms | 436.000 ms | 60 | 11~34 | 577~596 |
| mall/productDetail/productDetail | 256.000 ms | 77.000 ms | 59 | 4.6~28 | 584 |
初步结论：首页存在明显性能瓶颈
页面分析
1、pages/index/index
总结：首页首屏之后有一个长达3s左右的重渲染
原因：
XXX/getPromotionList聚合接口数据量过大, 超过100条数据，且存在大量冗余字段
前端在品牌列表setData的时候也没有过滤不需要的字段，一次性渲染的数据量过大，渲染时间过长
优化：精简setData的字段，减小setData的数据量；分页展示，首屏只load部分数据
2、pages/brandList/index
总结：渲染时间不长，但是渲染之间的间隔时间较长
原因：接口请求没有并行。登录成功后setData才去请求shopInfo，shopInfo之后才调brandInfo和goodList
优化：这些接口不依赖登录，也没有相互依赖关系。只有分享图的绘制需要等待三个接口。可以先渲染，延迟分享图的绘制。
3、mall/brand/index
总结：首次渲染时间很快，重渲染时间略长，导致白屏时间较长
原因：页面结构都等待接口返回才渲染
优化：可以先渲染不依赖接口返回的页面结构
优化方向
-
聚合列表优化：精简setData的字段，减小setData的数据量；分页展示，首屏只load部分数据
-
聚合列表页：优化接口并行请求
-
商品列表：设置onReachBottomDistance， 分页去掉全局loading
-
档期流：设置onReachBottomDistance提前请求；增大每页数据量，现在每个场次的档期数量只有3个，以至于每次分页只加载3个，显得很不流畅。跟运营商量能否合并一些场次？
-
商城档期列表：可以先渲染不依赖接口返回的页面结构，减少白屏时间
-
商品详情页：精简setData的数据量，去除不必要的数据，减少首屏渲染数据量。列表数据做缓存。
-
减少代码包大小：去掉搬运过来不用的代码，代码分包优化
-
使用懒注入
优化后性能测试数据
firstRender
| 页面 | Wall Duration | Self Time | CPU(%) | MEMORY(MB) | 备注 |
|---|---|---|---|---|---|
| pages/index/index | 362.000 ms | 359.000 ms | – | 314 | |
| pages/brandList/index | 191.000 ms | 189.000 ms | 13 | 450 | |
| pages/productDetail/productDetail | 283.000 ms | 282.000 ms | 18 | 501 | |
| pages/mall/index | 59.000 ms | 134.000 ms | 18~29 | 637 | 改版添加了子频道功能 |
| mall/brand/index | 139.000 ms | 136.000 ms | 22 | 425 | |
| mall/productDetail/productDetail | 201.000 ms | 196.000 ms | 10 | 548 |
reRender
| 页面 | Wall Duration | Self Time | CPU(%) | MEMORY(MB) | |
|---|---|---|---|---|---|
| pages/index/index | 614.000 ms | 522.000 ms | – | 317 | |
| pages/brandList/index | 175.000 ms | 120.000 ms | 26 | 540 | |
| pages/productDetail/productDetail | 110.000 ms | 108.000 ms | 30 | 541 | |
| pages/mall/index | 302.000 ms | 281.000 ms | 20 | 592 | 改版添加了子频道功能 |
| mall/brand/index | 393.000 ms | 385.000 ms | 26 | 562 | |
| mall/productDetail/productDetail | 214.000 ms | 202.000 ms | 38 | 578 |
总结：首页加载优化后首屏渲染时间明显减少，启动内存下降，整体内存峰值有所有下降，尤其是商详跳转商详的内存峰值
P.S.写于2021-07-16 有些过时的东西可能不适用于当前
原文链接：https://juejin.cn/post/7329350541136560182 作者：leafyyuki
