At some point in your career, you might have glanced over the Performance tab in the devtools of your favorite browser. You eventually tried to genera

Get to know your browser's performance profiler

submited by
Style Pass
2022-05-14 02:00:09

At some point in your career, you might have glanced over the Performance tab in the devtools of your favorite browser. You eventually tried to generate a profile but probably got quickly discouraged by it. The high density of information displayed makes it a little overwhelming and somewhat scary. I have been there, I feel you!

Good news is: the learning curve is not actually that steep!! Once you have grasped a few concepts it suddenly becomes your most valued tool to tackle performance bottlenecks.

This article will give you a few keys to understand how the profiler works and how to make a good use of it. Let's completely forget about console.log and console.time, today we are diving into the Performance Profiler!

Side note: I won't go too deep into complex scenarios here but I will eventually do a follow up article about advanced techniques.

The first step that I took to actually understand how the profiler works was to read the Mozilla documentation about their new performance profiler (This is an excellent doc, go read it).

Leave a Comment