小程序优化实践(二)

性能测试数据

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

相关推荐
卡卡军17 分钟前
🌈 react-sketch-ruler v3 升级之旅:当 React 遇上跨框架标尺引擎
前端·react.js
Asmewill22 分钟前
DeepAgents学习笔记三(Backend记忆存储)
前端
Alan Lu Pop39 分钟前
前端开发助手
前端·智能体
程序员鱼皮40 分钟前
我用 GitHub 仓库养 AI 龙虾,自动开发上线项目!保姆级教程
前端·人工智能·ai·程序员·github·编程·ai编程
27669582921 小时前
京东随机变速滑块拼图验证码识别(京东E卡)
java·服务器·前端·python·京东滑块·京东变速滑块·京东e卡绑卡
এ慕ོ冬℘゜1 小时前
手写生产级 jQuery Toast 轻量提示组件|零插件依赖、动画流畅、极简高
前端·javascript·jquery
Oneslide1 小时前
UI设计-企业OA风格
前端
程序员海军2 小时前
我用了 8 个月 Codex CLI,总结出这套 AI 编程工作流
前端·后端·aigc
এ慕ོ冬℘゜2 小时前
手写一款高兼容、零BUG图片预览组件|前端
前端·bug
铁链鞭策大师2 小时前
javaEE之多线程(2)
java·前端·java-ee