search

firefox-devtools / profiler

Firefox Profiler — Web app for Firefox performance analysis
https://profiler.firefox.com
Mozilla Public License 2.0
1.18k stars 385 forks source link

Graph JIT tier of JS functions over time #772

Open gregtatum opened 6 years ago

gregtatum commented 6 years ago

This work is not currently planned, but captured here so we have a record of it:

See Bug 1150299 for more details. Some of it is copied here.

image

Shu wrote:

Talked with several people. This is a picture of the current idea for the UI.

For the initial UI, we should focus on displaying leaf functions (that is, "self time" or "exclusive frames" only). Focusing on frames with call trees underneath them should come after we get the current view to work well.

The x axis is time. The y axis is conceptually "hotness" that moves with time. We want to visualize the evolution of hotness of a particular function over time. The idea is to divide the x axis according to N buckets. Let |b| be a bucket. Each bucket has a |startTime(b)| and |endTime(b)|. Suppose we have two helper functions:

timeOfSamples(leafFun, startTime, endTime)

Returns time taken by leaf samples of leafFun between startTime
and endTime.

timeOfAllSamples(startTime, endTime)

Returns time taken by all samples between startTime and endTime.

The y value (height of each bucket) for a bucket |b| is then

timeOfSamples(f, startTime(b), endTime(b))

timeOfAllSamples(startTime(b), endTime(b))

To express the implementation tier, each bucket itself would be a bar chart of 3 colors, a distinct color for each tier of Interpreter, Baseline, and Ion. In the picture, Interpreter is red, Baseline is blue, Ion is green. This is either a gradient or a blurred average or whatever.

This graph is naturally discontinuous.

A quirk is that this graph is not a static picture that can be zoomed in/out. Changing the width of the graph changes the buckets, and thus the y values. So, "zooming" in and out of this graph is really like pulling or squeezing an accordion. If it's pulled out enough, each bucket on the x axis would be exactly 1 sample, and the max(y) would be 1. This is shown in the picture with the "zoomed in" view.

Some visceral information I hope this UI gets across:

  • Phases in a program as seen by color changes over time: graph is tall enough and large chunks of red, then blue, then green, then blue, then green, etc.

  • Can't even get into Baseline: graph is tall enough and mostly red.

  • Failing to stay in Ion: graph is tall enough and mostly blue.

  • Oscillating and keep jumping in/out of Ion: graph is tall enough and is all technicolor.

┆Issue is synchronized with this Jira Task

digitarald commented 6 years ago

Related, bailout/invalidation overlay: https://bugzilla.mozilla.org/show_bug.cgi?id=1150292