小程序优化实践(二)

性能测试数据

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

相关推荐
不爱说话郭德纲3 分钟前
👩‍💼产品姐一句小优化,让我给上百个列表加上一个动态实时计算高度的方法😿😿
前端·vue.js·性能优化
现在没有牛仔了6 分钟前
小试牛刀,用electron+vue3做了一个文件归纳程序~
前端·electron
FogLetter8 分钟前
Prisma + Next.js 全栈开发初体验:像操作对象一样玩转数据库
前端·后端·next.js
知识分享小能手8 分钟前
React学习教程,从入门到精通, React教程:构建你的第一个 React 应用(1)
前端·javascript·vue.js·学习·react.js·ajax·前端框架
李剑一9 分钟前
别乱封装,你看出事儿了吧...
前端·vue.js
文心快码BaiduComate13 分钟前
新增Zulu-CLI、企业版对话支持自定义模型、一键设置自动执行、复用相同终端,8月新能力速览!
前端·后端·程序员
walking95716 分钟前
JavaScript 神技巧!从 “堆代码” 到 “写优雅代码”,前端人必看
前端·面试
前端西瓜哥21 分钟前
图形编辑器开发:基于矩阵的画布缩放和移动实现
前端
walking95721 分钟前
前端 er 收藏!高性价比 JS 工具库,轻量又强大
前端·面试
gongzemin30 分钟前
Vue 项目权限管理 路由 按钮权限
前端·vue.js