小程序优化实践(二)

性能测试数据

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

相关推荐
我即将远走丶或许也能高飞15 分钟前
vuex 和 pinia 的学习使用
开发语言·前端·javascript
钟离墨笺37 分钟前
Go语言--2go基础-->基本数据类型
开发语言·前端·后端·golang
爱吃泡芙的小白白41 分钟前
Vue 3 核心原理与实战:从响应式到企业级应用
前端·javascript·vue.js
卓怡学长1 小时前
m115乐购游戏商城系统
java·前端·数据库·spring boot·spring·游戏
老陈聊架构2 小时前
『AI辅助Skill』掌握三大AI设计Skill:前端独立完成产品设计全流程
前端·人工智能·claude·skill
Ulyanov2 小时前
从桌面到云端:构建Web三维战场指挥系统
开发语言·前端·python·tkinter·pyvista·gui开发
cypking3 小时前
二、前端Java后端对比指南
java·开发语言·前端
糠帅傅蓝烧牛肉面3 小时前
单实例多MCP聚合服务:两种实现方案深度对比
前端·docker·ai
JosieBook3 小时前
【Vue】12 Vue技术—— Vue 事件修饰符详解:掌握事件处理的高级技巧
前端·javascript·vue.js
艾斯特_4 小时前
Echarts常用配置项及解释
前端·javascript·echarts