(Shoutout also to the rest of the team: Florian, Greg, Nazim, Markus and Gerald)
Our team works on perf-
It’s a very complex tool currently used by Firefox’ own engineers. Which explains why the project isn’t exactly beginner friendly.
The thing is, in order to really take advantage of perf-
However, even if you’re not a Firefox engineer, you can still use perf-
Perf-html comes as a Firefox add-on. Once you install the add-on, it’s easy to capture your first profile.
For example, this is a profile of the CNN.com website loading.
Pretty colours right?
When analysing, you’ll start off by looking for a red bar on top of the timeline graph, which indicates that a substantial amount of work has been done there (or even that something was stuck).
If I zoom in onto that section, I get this:
Oh yes, the Profiler works best if you have the actual codebase available.
Essentially, the Profiler collects information in two ways: Samples (a snapshot of activity every 1 millisecond by default, but you can change that), and Markers (these are markers placed in your code that are told to collect information at specific times and occurrences).
Depending on what you want to analyze, you might find either the Samples or Markers data more useful.
From talking to Firefox engineers, there is no one right way of analysing the information and everyone has their preference: if you are a numbers person you’ll probably spend a lot of times in the Call Tree – a tree of all the functions – and if you are a more visual person, you might prefer the Flame Graph.
The Profiler is used by the majority of Firefox’ engineers, with the overreaching goal of making Firefox more performant.
We also have several contributors, some have been regulars for a number of years (shoutout to Michael)
I initially applied to work on perf-
Perf-html is highly complex and dense with information and my main job is to make it more usable and accessible to everyone.
So far I’ve dealt with keyboard navigation, focus indicators, ARIA roles and hiding elements that should not be added to the DOM tree (Firefox’ accessibility inspector really helps with that).
I’ve also learned a lot about
So far, an exciting and productive journey and I can’t wait to see what’s going to happen next!