一、性能测试数据

测试手机：华为 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

总结：首次渲染时间很快，重渲染时间略长，导致白屏时间较长

原因：页面结构都等待接口返回才渲染

优化：可以先渲染不依赖接口返回的页面结构

优化方向

1. 聚合列表优化：精简setData的字段，减小setData的数据量；分页展示，首屏只load部分数据

2. 聚合列表页：优化接口并行请求

3. 商品列表：设置onReachBottomDistance， 分页去掉全局loading

4. 档期流：设置onReachBottomDistance提前请求；增大每页数据量，现在每个场次的档期数量只有3个，以至于每次分页只加载3个，显得很不流畅。跟运营商量能否合并一些场次？

5. 商城档期列表：可以先渲染不依赖接口返回的页面结构，减少白屏时间

6. 商品详情页：精简setData的数据量，去除不必要的数据，减少首屏渲染数据量。列表数据做缓存。

7. 减少代码包大小：去掉搬运过来不用的代码，代码分包优化

8. 使用懒注入

优化后性能测试数据

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 有些过时的东西可能不适用于当前