How to find bottlenecks in your JavaScript

Yesterday, I shared this quote from Addy Osmani (emphasis mine):

That said, even a small bundle, written poorly or with poor library choices can result in the main thread being pegged for a long time in compilation or function call times. It’s important to holistically measure and understand where our real bottlenecks are.

But how exactly do you find those bottlenecks? Sam Saccone (also of Google) shared this awesome little feature in Google Chrome that actually shows you the bottlenecks in your code:

To see this:

1. Open up Chrome Developer Tools.
2. Click on the Network tab.
3. Click "Record" and reload your site.
4. Click the Sources tab and open up your JavaScript file.

I did this on my own site, and the JavaScript for my site loads and parses in 1.7ms, even if I throttle my network to simulate 3g.

Vanilla JS FTW!