小程序优化实践(二)

性能测试数据

测试手机:华为 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 有些过时的东西可能不适用于当前

相关推荐
lvbb661 小时前
微信小程序-路线规划功能
微信小程序·小程序·notepad++
css趣多多1 小时前
案例自定义tabBar
前端
姑苏洛言3 小时前
DeepSeek写微信转盘小程序需求文档,这不比产品经理强?
前端
林的快手3 小时前
CSS列表属性
前端·javascript·css·ajax·firefox·html5·safari
匹马夕阳3 小时前
ECharts极简入门
前端·信息可视化·echarts
爱上大树的小猪3 小时前
微信小程序模仿快播标签云滚动特效
微信小程序·小程序
API_technology3 小时前
电商API安全防护:JWT令牌与XSS防御实战
前端·安全·xss
yqcoder4 小时前
Express + MongoDB 实现在筛选时间段中用户名的模糊查询
java·前端·javascript
十八朵郁金香4 小时前
通俗易懂的DOM1级标准介绍
开发语言·前端·javascript
m0_528723815 小时前
HTML中,title和h1标签的区别是什么?
前端·html