Week 1: JavaScript Profiling Using Chrome Dev Tools

4 min readJun 1, 2019

JavaScript Profiling shows us which function or processes take most of the time and runtime performance shows how Musicblocks performs when it’s running.

To start

The chrome DevTools performance tab is used, this tab enables us to identify performance bottlenecks.

To open the DevTools on Chrome, click on the menu at the top-right of the browser window, then select Tools > Developer Tools

Different devices have different CPU power which affects Musicblocks performance on those devices because of the lower CPU power of mobile devices we use CPU throttling to stimulate the app we are profiling.

In the chrome DevTools :

Click on the Performance tab
The screenshot box is enabled
For CPU I selected the 4x slow down so that my CPU is twice slower than usual

Now that Musicblocks is throttled there is a performance degradation as we move the blocks and also and when we click on a new project, the blocks somewhat run smoothly when optimized but when unoptimized it starts moving too slow.

Performance Recording

The record circle is clicked to begin tracking Musicblocks performance metrics. The tracker is allowed for few seconds to capture some data after which it is stopped. The DevTools will stop recording and process the data then it displays the result on the performance panel like this

Analysis of data

For the analysis of the data I started by looking at the :

Frames per second

Frames per second are also known as FPS. The higher the green bar the higher the FPS. The FPS is marked by purple color for easy identification

CPU Chart

Below the FPS chart is where the CPU Chart is. The color in the CPU chart matches the color in the summary tab at the bottom of the performance panel. The CPU chart is full of colors cause it was maxed out during the recording.

Hovering the mouse over the FPS and CPU chart allows you to see the screenshot of the page at that point in time
The summary tab shows a breakdown of activity the page spends most of its time scripting
The main section is expanded, events stacked on top of each other is seen
The main section and Summary tab only display information for a selected portion of the recording
Whenever you see a red triangle, it’s a warning that there may be an issue related to this event.
Clicking that causes DevTools to highlight the event that initiated Clicking that jumps you to the relevant line in the source code.

There are many ways to improve but the best way to start is through JavaScript Profiling cause it gives an insight into how the music blocks run during use

Actions that slow run time of Musicblocks

From the analysis, there are actions that slow the runtime of Musicblocks

Use of setTimeout: setTimeout Delays the execution of a function by a specific time duration the best way to do this is by adding promises and invariably going to make use of ES6 syntax
Unwanted loops: the best way to do this is by decreasing the amount of work done per iteration and decreasing the number of loop iteration this is through array optimization caching length of an array in loops
Absence of debounce function: adding the debounce function is an incredible performance boost in some cases.
Adding requestAnimationFrame when necessary
Avoiding the use of new keywords and use literals instead as literals are evaluated faster

Future work

Adding promises to set Timeout: to help the web application execute properly.