firefox-devtools / firefox-devtools/profiler

Graph JIT tier of JS functions over time

Open
#772 1 comment 0 reactions 0 assignees View on GitHub
JIT
Dominant language
TypeScript
Stars
1.5k
Forks
491
Avg merge
3d 5h
Merged PRs (30d)
30

Description

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

See [Bug 1150299](https://bugzilla.mozilla.org/show_bug.cgi?id=1150299) for more details. Some of it is copied here.

![image](https://user-images.githubusercontent.com/1588648/36048977-bd60fe22-0da6-11e8-8a6f-431f18c354a1.png)

- - -
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](https://mozilla-hub.atlassian.net/browse/FP-698)

Contributor guide

Open the contributing guide

Research direction

Start by reading Bug 1150299 and the linked Jira task, then inspect the existing profiler UI and graphing entry points; this issue names no files or tests. Done would require an agreed time-bucketed graph for leaf functions with Interpreter, Baseline, and Ion tiers, including the described width-dependent zoom behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
data-visualization, frontend, performance
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
18/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.