真机性能瓶颈在哪里？录下来仔细分析！

有开发者说：无论哪个小程序，在不同性能的手机上运行，给用户带来的流畅感体验都会不一样。

真机本身的性能，确实是程序流畅运行的重要条件，但真机能为程序运行提供的计算资源不是无限的，无论多强的真机性能，对程序提供的计算资源总会有个上限。作为开发者，无法提高真机提供给程序的计算资源，就只能在降低程序的资源消耗上下工夫。

而降低程序的资源消耗，首先就要清晰的了解，程序到底把资源消耗在哪里了？

在之前，开发者如果要分析代码的执行耗时，只能通过时间打点来逐个排查，如果是复杂任务，打点较多，分析起来非常不直观；最难受的是，一些微任务以及小程序框架内部的细节根本无法分析。

微信小程序真机调试 2.0，目前已支持录制小程序/小游戏的真机性能，用于后续的分析优化。开发者可以通过性能报告直观的查看程序内部的运行过程，并可以看到每个动作的 CGI 执行耗时、JSAPI 耗时、代码加载耗时等。

接下来，我们来演示如何在真机调试中录制性能并分析性能。

录制性能

首先，开启小程序真机调试，在手机中打开小程序并连接真机调试，具体可参考官方文档

开启调试后，在小程序开发者工具的「真机调试」窗口中，选择「Performance」面板

在要录制的业务流程之前，点击「实心圆圈」录制按钮，开始录制小程序性能，然后操作手机完成业务流程，点击停止录制，即可查看录制结果。

录制时，可以选择屏幕截图（小游戏暂不支持），会逐帧截屏方便后期回溯。

开发者需要注意，录制时间不是越长越好，建议只针对一个业务流程行为分析。比如在打开新页面之前开始录制，新页面渲染完成后结束录制，这样可以集中分析在页面渲染期间的性能。

如果你想录制冷启动流程，可以点击「重启」按钮，小程序会自动刷新并重新开始录制

分析性能

录制完之后，我们会得到一个时间线报告，详细记录了在录制期间的小程序性能细节。

接下来我们开始详细分析，性能记录类别主要有以下几种，我们分别来解释：

JS Engine（JavaScript 引擎）

小程序逻辑层的性能记录，通过火焰图的形式展现，显示代码运行时的所有细节，除了业务代码之外还包含基础库的代码执行情况。

对小程序进行性能瓶颈分析，我们可以首先聚焦到火焰图中较宽的地方，较宽的地方意味着这里有更长的执行时间。接下来，可以在感兴趣的范围中按调用耗时进行排序，检查它们是否有不必要的计算或复杂的逻辑。通过观察函数的总耗时和调用频率，我们可以判断是否有某些函数存在性能问题。

Timings

小程序的关键事件，如 App.onLaunch，App.onShow 还有页面的渲染时机如 First Paint (FP) 等。

Performance

小程序的关键事件，包括页面路由跳转、wx 接口调用等。

这里我们主要关注是否有频繁路由切换或者接口频繁调用，又或者是调用到了不推荐使用的接口，从而导致性能问题。

页面线程

小程序页面的关键事件。由于调试协议的限制，无法将页面线程的完整 JS 火焰图展示出来。这里主要关注页面创建以及更新 pageReRender 耗时。（小游戏无此项数据）

Component Framework

如果你的小程序使用 skyline，则会展示此数据，主要记录了页面展示里各个组件性能信息。

注意：小程序需要使用 develop 基础库，目前暂只支持 skyline，小游戏无此项数据

客户端线程

微信客户端的关键性能信息，主要关注小程序包的代码注入耗时。

其他

其他的性能类比解读，可参考微信官方文档

优化性能

在性能受限的手机上，如果你的小程序在某个业务流程中出现异常卡顿，就可以使用上述方法进行分析，得到资源消耗的分布情况。

优化性能的本质是降低程序的资源消耗，最有效的策略就是减少每个 CPU 时间片内的任务量。减少任务，或者分散到不同的时间片中执行，都可以实现性能优化，保持程序的流畅运行。

比如页面的初始化渲染，不一定需要渲染页面的完整内容，只需要渲染可见部分的内容，其他的等快加载到时再渲染也可以，打开页面这一瞬间，执行的任务大大减少，资源消耗也会显著降低。

更多关于性能优化的指导，可参考微信官方文档