speedscope 是一款快速、交互式、基于 Web 的大型性能分析器查看器（www.speedscope.app，github.com/jlfwong/speedscope）。它受到 Chrome Devtools 的性能面板 和 Brendan Gregg 的 FlameGraphs 的启发。如果您以前从未听说过火焰图，或者听说过但并不理解如何阅读，rbspy 文档中的“使用火焰图”指南 非常棒。

speedscope 的目标是为来自各种分析器的各种编程语言提供一种以 60fps 的速度交互式探索大型性能分析器的方法。它完全在浏览器中运行，不会将任何性能数据发送到任何服务器。由于它完全在浏览器中运行，因此应该可以在 Mac、Windows 和 Linux 上的 Firefox 和 Chrome 中运行。它可以下载以离线运行，无论是 从 npm，还是仅仅作为 一个完全独立的 zip 文件。

在 Figma 中跨多个语言环境进行性能工作时，我注意到每个社区都倾向于创建自己的工具来可视化性能问题。通过 speedscope，我希望消除这些重复的努力。为了实现这一目标，speedscope 支持从不断增长的分析器列表中导入性能分析。

JavaScript

• 从 Firefox 导入
• 从 Chrome 导入
• 从 Node.js 导入

Ruby

• 从 stackprof 导入
• 从 rbspy 导入

Go

• 从 pprof 导入

Haskell

• 从 Haskell 导入

原生代码

• 从 Instruments.app 导入 (macOS)
• 从 perf 导入 (linux)

speedscope 还具有 一个稳定的文档文件格式，使其成为可视化完全自定义性能分析的合适工具。这允许新的分析器支持导入到 speedscope，而无需修改 speedscope 的代码（尽管 欢迎贡献！）。这就是我添加了对可视化 rbspy 性能分析的支持方式：rbspy#161。Firefox 和 Chrome 都有功能强大的性能分析可视化工具，但它们使用的文件格式 经常变化。

此外，与其他类似工具不同，speedscope 的设计旨在使其易于在您自己的基础设施中托管。这使您可以将 speedscope 集成到您的系统中，只需单击一下即可查看后端性能分析。在 Figma，我们有一个 Ruby 后端，因此我创建了一个 rack-mini-profiler 的主观分支 来实现这一目的。如果您支持跨域访问性能分析，您甚至可以通过 #profileUrl=… 哈希参数 将它们直接加载到 https://www.speedscope.app 中。

它能做什么？

speedscope 分为三个主要视图：时间顺序、左重和三明治。

🕰 时间顺序

在“时间顺序”视图（默认视图）中，调用栈按照它们在输入文件中出现的顺序从左到右排序，这通常是它们被记录的顺序。此视图最有助于理解应用程序随时间的行为，例如“首先从数据库中获取数据，然后准备数据以进行序列化，最后将数据序列化为 JSON”。

水平轴表示每个栈的“权重”（最常见的是 CPU 时间），垂直轴显示您在样本时间处于活动状态的栈。如果您单击其中一个帧，您将能够看到有关它的汇总统计信息。

⬅️ 左重

在“左重”视图中，相同的栈将分组在一起，无论它们是否按顺序记录。然后，对栈进行排序，以便每个父节点的最重栈都在左侧——因此被称为“左重”。此视图有助于理解在存在数百或数千个函数调用交织在其他调用栈之间的情况下，所有时间都花在了哪里。

🥪 三明治

“三明治”视图是一个表格视图，您可以在其中找到所有函数及其关联时间的列表。您可以按自时间或总时间排序。

它被称为“三明治”视图，因为如果您选择表格中的某一行，您就可以看到所选行的所有调用者和被调用者的火焰图。

了解更多信息

有关 speedscope 的最新信息可以在 GitHub 页面上找到：github.com/jlfwong/speedscope。如果您遇到问题，请通过 提交问题 告诉我！