The Browser - Profiling on the Processing Tab

Once everything has been loaded your browser still has to figure out what to do with it all.

Front-end JavaScript processing is the area that you probably think of when you think of JavaScript performance optimization. Though for now, we are still focusing on finding where performance is a problem and.

The Performance Tab

To investigate time spent processing we are going to use the Performance tab in the browser developer tools. One thing that is different about the performance tab from the network tab is that you have to tell the browser specifically when you want to start recording performance data and when to stop.

The reason you have to start and stop recording performance data by hand is that it requires a lot of memory and processing power to make detailed measurements. Since by now you should have used other resources to find specific points you want to measure this isn't an issue as you have a general idea of where to start and where to stop.

You will probably either measure the processing that is required when the application is first loaded, after all getting the data is only part of the battle, or record a specific action that has been found to be costly.

Call Tree

The first place to check it the Call Tree View. The call tree will show you how many times discrete functions get called. Additionally, it shows the time spent running the function and the percent of the total processing that went into each function.

One nice feature that browsers offer now is the ability to see a time chart showing how much processing is happening when and allow you to select a specific slice of time for which you are analyzing.

Flame Chart (in Chrome this is the Main chart)

The Flame Chart is pretty amazing. It provides a graphical view of each function and what each function calls. The flame chart is helpful in that while function x on the surface may look like a culprit it could be a different function that needs to be optimized. It could be that function x calls function y unnecessarily (function x is above function y), and so it is function x that needs to be optimized. The reverse could also be true, and function j may call function z and function z is not performing as desired so it should be the one to focus on when doing your optimizations.

As with the call tree, you can zoom into the Flame Chart to see what is going on at a specific time and it helps you (based on function names) to identify when exactly the action you are trying to track happened.