Flutter 性能优化的利器——Profiling

2023-12-03 21:44:39

性能优化是一项非常重要的工作，在过去的几年中，Flutter 团队一直在努力提高 Flutter 的性能。在 Flutter 2.5 中，Flutter 团队正式推出了 Tracing，这是一个性能优化的利器，可以帮助开发者更好地分析和优化 Flutter 应用的性能。

Tracing 顾名思义，就是追踪应用程序在运行过程中各个阶段的耗时分布。通过 Tracing，开发者可以直观地了解到应用程序中哪些代码是耗时的，从而有针对性地进行优化。

例如，在下面的 Tracing 中，我们可以看到 Flutter Engine 在初始化过程中各个阶段的耗时分布。

╔═══════════════════════════════════════════════════════════════════════════════════════════════╗
║                                          ╔═══════════════════════════════════════════╗   ║
║                                          ║                                           ║   ║
║                                          ╠═══════════════════════════════════════════╣   ║
║                                          ║                                           ║   ║
║                                          ║                                           ║   ║
║        ┏━━━━━┳━━━┓                ║                                           ║   ║
║        ┃ 初始化┃发现┃                ║                                           ║   ║
║        ┗━━━━━┻━━━┛                ║                                           ║   ║
║                                          ║                                           ║   ║
║       ╔══════════════════╦═══════════╗║                                           ║   ║
║       ║        解析         ║ Dart JIT ║║                                           ║   ║
║       ╚══════════════════╩═══════════╝║                                           ║   ║
║                                          ╠═══════════════════════════════════════════╣   ║
║                                          ║                                           ║   ║
║                                          ║                                           ║   ║
║            ┏━━━━━━━━━━━━━━━┳━━━━━━━━━┳━━━━━━━━━━━┓                            ║   ║
║            ┃ Frame Pipeline ┃ Garbage ┃ Event Loop ┃                            ║   ║
║            ┗━━━━━━━━━━━━━━━┻━━━━━━━━━┻━━━━━━━━━━━┛                            ║   ║
║                                          ║                                           ║   ║
║                                          ║                                           ║   ║
╚═══════════════════════════════════════════════════════════════════════════════════════════════╝

从 Tracing 中，我们可以看到，在 Flutter Engine 初始化过程中，最耗时的阶段是 Dart JIT，其次是 Event Loop。因此，如果我们想要优化 Flutter 应用的性能，我们就应该重点关注 Dart JIT 和 Event Loop 的优化。

那么，如何使用 Tracing 来优化 Flutter 应用的性能呢？

首先，我们需要先在 Flutter 应用中启用 Tracing。可以在 Flutter 的启动参数中添加 --trace-startup 参数来启用 Tracing。

启用 Tracing 后，当我们运行 Flutter 应用时，就会在手机上生成一个 .perf 文件。这个 .perf 文件中包含了应用程序在运行过程中各个阶段的耗时分布。

我们可以使用 Chrome 开发者工具中的 Performance 工具来打开 .perf 文件，并查看应用程序的 Tracing。

在 Performance 工具中，我们可以通过点击左上角的“Load”按钮来打开 .perf 文件。

打开 .perf 文件后，Performance 工具会自动生成一个瀑布图，瀑布图中展示了应用程序在运行过程中各个阶段的耗时分布。

我们可以通过点击瀑布图中的某个阶段来查看该阶段的详细信息。

在详细信息中，我们可以看到该阶段的耗时分布，以及该阶段中执行的代码。

通过分析 Tracing，我们可以找出应用程序中耗时的阶段，并有针对性地进行优化。

例如，如果我们发现 Dart JIT 是最耗时的阶段，那么我们可以尝试使用 Dart Native Compilation 来优化 Dart 代码的性能。

如果我们发现 Event Loop 是最耗时的阶段，那么我们可以尝试减少 Event Loop 中的任务数量，或者使用 Future.microtask 来优化 Event Loop 的性能。