Cross-language Performance Profile Exploration with speedscope

speedscope is a fast, online, web-based viewer for large efficiency profiles ( www.speedscope.app , github. com/jlfwong/speedscope ). It’ ersus inspired by the performance panel of Chrome programmer tools and by Brendan Gregg’ s i9000 FlameGraphs . If you’ ve never heard of flamegraphs before or even if you’ ve heard of all of them but never understood how to look at them, the guide “ Using flamegraphs” from rbspy ’ s documents is wonderful.

The aim of speedscope is to provide a 60fps method of interactively exploring large performance single profiles from a variety of profilers for a selection of programming languages. It runs completely in-browser, and does not send any profiling data to any servers. Because it operates totally in-browser, it should work in Opera and Chrome on Mac, Home windows, and Linux. It can be downloaded to operate offline, either from npm , or just because a totally stand alone zip file .

In doing performance work throughout many language environments at Figma , I discovered that every community tends to create its tools for visualizing performance problems. With speedscope, I hoped in order to de-duplicate those efforts. To meet this particular goal, speedscope supports import associated with profiles from a growing list of profilers:

JavaScript

Ruby

Go

Haskell

Indigenous code

speedscope also offers a stable recorded file format , making it appropriate like a tool to target for visualization associated with totally custom profiles. This allows brand new profilers to support import into speedscope without needing to modify speedscope’ s program code at all (though contributions are welcome! ). This is how I added support designed for visualizing rbspy profiles: rbspy#161 . Firefox & Chrome both have capable profile visualizers, but the file formats they use change frequently .

Also unlike various other similar tools, speedscope is designed to ensure it is easy to host inside your own facilities. This allows you to integrate speedscope to see backend performance profiles with an one click. At Figma, we have the ruby backend, so I made a good opinionated shell of rack-mini-profiler to undertake exactly this. If you support entry to performance profiles across domains, you may also load them directly into https://www.speedscope.app through a #profileUrl=… hash parameter .

speedscope is broken down into 3 primary views: Time Order, Still left Heavy, and Sandwich.

🕰 Time Order

In the “ Time Order” view (the default), call stacks are ordered left-to-right in the same order as they happened in the input file, which is generally the chronological order they were documented in. This view is many helpful for understanding the behavior of an program over time, e. g. “ 1st the data is fetched from the data source, then the data is prepared just for serialization, then the data is serialized to JSON”.

The particular horizontal axis represents the “ weight” of each stack (most typically CPU time), and the vertical axis shows you the stack active during the time of the sample. If you click on among the frames, you’ ll be able to notice summary statistics about it.

⬅ ️ Left Heavy

Within the “ Left Heavy” view, similar stacks are grouped together, whether or not they were recorded sequentially. Then, the particular stacks are sorted so that the largest stack for each parent is in the left — hence “ remaining heavy”. This view is useful just for understanding where all the time is going within situations where there are hundreds or even thousands of function calls interleaved in between other call stacks.

🥪 Sandwich

The “ Sandwich” watch is a table view in which you will discover a list of all functions and their particular associated times. You can sort simply by self time or total period.

It’ s the “ Sandwich” view because if you decide on one of the rows in the table, you can observe flamegraphs for all the callers and callees of the selected row.

Up-to-date information about speedscope can be found over the GitHub page: github. com/jlfwong/speedscope . If you come across problems, please let me know by filing an issue !

If you liked Cross-language Performance Profile Exploration with speedscope by Jamie Wong Then you'll love Web Design Agency Miami