关注专题不迷路，进入“技术新风向”专题首页，点击“关注”即可

更多视频版本请前往学堂收看《如何用性能分解读小程序》

小程序性能是小程序运行和经营的基石，这些容易被忽略的细节直接影响着用户的使用体验与消费意愿：

1. 小程序打开速度慢💥直接退出再也不见
2. 小程序又突然白屏💥消费热情突然浇灭
3. 页面跳转慢慢慢慢💥时间紧看看别的吧
4. 页面渲染出问题啦💥所见非所求好难受

之前上线的《技术新风向丨小程序性能优化指南》，为大家系统性地讲解了小程序性能优化基本逻辑。近期平台对性能相关的能力进行了再次升级，希望能帮助大家在小程序性能优化过程中更加流畅顺利。

一、性能分重磅上线

平台推出「性能分」，将分散的性能指标，聚合成一个可以全面衡量小程序基础体验的综合指标。帮助大家能更直接、更立体的感知自身小程序性能水平，快速判断小程序性能优化的程度与方向。

现在进入「控制台-开发-性能分析」即可查看你的小程序性能评分！

小程序性能分由「启动性能」「运行性能」「质量监测」三个模块组成。

每个模块代表各自维度下的性能效果，拥有对应的专属性能分，并且可以查看该模块在同类型小程序中处于哪种水平与前7日的分数对比，方便大家明确自己小程序性能定位与波动情况。

三个模块性能分最终将汇总成一个小程序性能分，自动计算当前性能分等级与在同类型小程序中的排序。大家可以通过等级说明，了解小程序当前性能是需要继续保持，还是急需优化。

• 更多性能分相关介绍，欢迎查看：小程序性能分上线！更直接、更立体地感知小程序性能水平

二、建构完整的性能优化思路

发现问题

通过性能分析平台查看性能水平，如通过查看性能分，可以发现小程序性能处于什么样的水平。比同评分低或者比同类型低，都是需要关注的问题。此时需要查看重点需要优化的内容，往往也是收益最大和最容易优化的内容。

同时观察根据启动、运行和质量监测的评分，找到最低的或者低于同类型的明确优化哪个阶段。

解决问题

平台将问题分成了三大类，「启动性能」「运行性能」「质量监测」每个类别都有单独的优化思路，去协助分析并解决问题

一个常用的分析路径是，线上发现问题，线下通过体验评分和客户端性能分析工具查看情况，结合性能Trace工具分析具体耗时代码。

找到原因后进行具体问题分析，不同问题都有优化思路，如果是图片太多导致打开慢可以参考让 image 图片体积减小 7 成 ；如果是启动核心请求发送太晚可以参考数据预取，如果预取逻辑复杂可以参考数据预取新方案；启动上骨架屏也是常规的优化思路。如果想要更极致也可以考虑TTWebAssembly。

防止复现

优化完成上线后，为了避免问题再次发生，可以在平台建立性能预警，性能预警支持对严重影响用户体验的指标提供预警能力。报警提供异常次数、影响范围等信息，支持创建自定义预警规则，如自定义 pv/uv、影响人数、环比波动阈值等。

如果想要用自己的服务进行数据监控，也可以参考性能指标获取方式进行指标获取，开发者可以使用「tt.performance.getEntries」获取当前小程序性能相关的信息，包含框架上报和开发者打点的性能数据。

三、新数据预取方案

数据预取能够在小程序冷启动时提前发起请求，并缓存请求内容，在真实请求时使用缓存数据，减少网络请求的时间。在一些发起网络请求较晚的场景，增加数据预取，可以提升页面完全展现的速度。

新方案是独立 js 环境，开发者通过 js 控制要执行的逻辑。所有的逻辑均为开发者控制，灵活性高， 支持图片请求等更多能力。

• 数据预取优势说明：

• 新老数据预取方案对比：

更多新数据预取方案相关介绍，欢迎查看：数据预取js方案

四、性能优化优秀案例

通过参考性能分析平台、体验评分工具以及性能优化教程，很多小程序拿到了优化收益👏，打破了以下误区：

1. 性能优化太高端，上手成本高 No
2. 性能优化对业务收益不大 No

实际上大家验证发现，根据提供的流程优化，开发成本在 0.5～3 天左右 🎉

部分小程序对比优化前后，成功看到小程序页面内容的人数提升 0.5%～1% 🎉

一起来看看性能优化提升明显的小程序⬇️，他们是怎么做到的？

Tips

如果你对小程序性能优化有更多好想法和好建议，欢迎在性能分话题：#看看你的小程序性能有几分#留言分享～

我们会根据大家的反馈持续升级迭代，为大家带来更多更详细的小程序性能优化方案🎉