一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

小程序优化实践(二)

性能测试数据

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

原文链接:https://juejin.cn/post/7329350541136560182 作者:leafyyuki

(0)
上一篇 2024年1月30日 上午10:00
下一篇 2024年1月30日 上午10:11

相关推荐

发表评论

登录后才能评论