Profiling media workloads in Firefox

It will come as no surprise that playing video and audio in a web browser requires a certain attention to performance. Whether it is by getting the design right, using good implementations of codecs (potentially with hardware acceleration), taking care of using memory properly and avoiding unnecessary copies, or ultimately micro-optimizing some particular hot paths using flashy assembly routines or a clever algorithm, a good experience for an end user doesn’t come without hard work.

It’s well known that it’s quite hard for a programmer to know ahead of time what part of a program is going to be expensive in terms of CPU, if possible at all. Software profiling, the practice of measuring the performances of a software while it’s running, and often doing a specific task in a specific environment is essential for producing good quality software in the first place, and to verify that optimizations are, in fact, making things faster.

Moreover, the web platform being particularly flexible, it’s quite possible that a web developer uses a particular feature in a way that the implementor and the specification author didn’t anticipate. In those instances, it happens that the browser code is not optimal (or really slow, up to the point of being unusable), and reporting the bug to the developers of the web browser is much appreciated.

Finally, browsers being widely used software that runs on a rather large range of hardware and operating systems, it’s expected that the experience of users varies (for example, attempting to play a 4k 60fps video might or might not work on old hardware with outdated drivers). If a developer has no way of reproducing the issue, nor a way to understand what is causing the problem, it becomes harder to fix the issue for the end user 1 .

The Firefox Profiler

The Firefox profiler has been introduced years ago, and it has a few characteristics that make it extremely efficient to improve Firefox:

In addition it can import not only Firefox’s internal recording, but can also take a perf profiles as input (and maybe more system profilers in the future), recorded on other programs than Firefox, and the UI of the profiler is better than most other profiler UI, so it’s quite nice. But that’s a story for another post.

The Media preset

Going back to media, we of course use a certain amount of threads in Firefox, to have video and audio play smoothly while the user is using other tabs or interacting with the page. This makes it a bit hard to set up the profiler to record the right set of threads, with the right settings, especially for someone less technically inclined that a Firefox developer. The instructions used to look like this. On quite a few request to get profiles (on bugzilla, hacker news, randomly on reddit, etc.), only a handful people manageed to submit usable profile that allowed us to understand what was going on. We can’t blame anyone but ourselves for this; it’s not a user’s job to understand the innards of our software, and we can be nothing but grateful when they take time out of their day to report a problem they encountered.

But all this is over, since the introduction of profiling presets by my colleague Greg Tatum (with Julien Wajsberg on review duties, and I’m sure other people from their team). Let’s imagine I have a performance problem when seeking in videos on YouTube. To profile Firefox when it’s doing something that is media-related , here are now the complete steps, from a stock Firefox 2.

A few words about some specific steps in this video, with links:

Closing words

Sending the profile URL to a Firefox developer (for example on a Bugzilla ticket, on reddit, hacker news, or via email) immensely increases the chance that the problem will be fixed.

It is rare that a problem affects only one person when the number of users of your software is in the hundreds of millions. By reporting performance issues with profiles, anybody who has an interest in making the web better can contribute.

It’s rather easy to file a ticket on our Bugzilla instance. Logging in with a GitHub or Bugzilla account, and clicking the following link:

directly sends the bug to the media team, that triages regularly. They will reorient the ticket to the right people, that will then try to diagnose or debug. Adding a copy of about:support (type this in the address bar if you’re reading this in Firefox), and any weirdness about your setup goes a long way to have whatever your report fixed in an future release of Firefox.

On behalf of the media team, thanks in advance!

  1. But not impossible, there are lots of stories about crazy ideas lighting up in the head of developers in the middle of taking a shower while half awake, finding crazy connections between multiple subsystems to find a weird edge case that happened to be what was causing the issue. ↩︎

  2. I’m on macOS, but this is the same on all desktop platforms, mobile is also supported of course but the workflow is different since the Firefox being profiled is on a different machine than the Firefox displaying the profile. ↩︎