Using the Performance Web API with Chrome DevTools
Now, Chrome DevTools Supports JavaScript Performance Marks Logs and Visualization
As developers, we always push our limits to develop better-performing applications. And most of the time, we use specialized tools and libraries to measure our applications’ performance.
Do you know that JavaScript provides a powerful Performance API that we can use in any JavaScript project?
JavaScript performance API comes with a variety of inbuilt functions like Console.time, Console.timeEnd, Performance.now, Performance.mark, Performance.measure, etc.
Each of these functions has its advantages and covers a broader scope. However, in this article, I will be focusing on Performance.mark and Performance.measure since we can use them to measure, visualize, and interpret execution times in JavaScript very easily.
Performance.mark and Performance.measure are two functions dependent on each other. So before going into details, let’s get a basic understanding of these two functions.
Performance.mark()
As the name implies, Performance.mark function creates marks in our code and track whenever we call it. This function requires a string parameter to execute, and that string is used to identify the mark uniquely.
performance.mark(‘mark-name’);The precision of Performance.mark() is up to 5µs in the fractional.
When we use Performance.mark in our code, it creates timestamps in the performance buffer alongside mark name, start time, entry type, and duration. Here, the entry type is set by default for each mark, and the duration will always be zero.
These timestamps are used to measure the execution time between 2 marks with Performance.measure function.
Performance.measure()
Performance.measure()function is mainly used to measure the execution time between 2 marks we set before.
We can also measure execution time between the start of the application and a mark, or between the start of the application and measure, or between marks which is measured using Performance.measure function.
//between 2 marks
performance.measure('measure-name', 'mark-1-name', 'mark-2-name');//from start to measure
performance.measure(‘measure-name’);//from start to mark
performance.measure('measure-name', undefined, 'mark-2-name');//from mark to measure
performance.measure('measure-name', 'mark-1-name');
For a better understanding, let’s take a simple JavaScript example to see them in action.
Build Great Design Systems and Micro Frontends
Take frontend development to the next level with independent components. Build and collaborate on component-driven apps to easily unlocks Micro Frontends, and to share components.
OSS Tools like Bit offer a great dev experience for building and composing independent components, and build solo or together with your team.
Measure Performance Using Performance Marks in Vanilla JavaScript
In the following example, I have used a simple for loop to read an array with 100000 items and reassign them to a new Array. Also, I have included 2 performance marks before and after the function call and a performance measure after the 2nd mark.
var arr = new Array(100000).fill(Math.random());function testingFor(arr) {
var res = [];
for (let i = 0; i < arr.length; i ++) {
res.push(arr[i]);
}
return res;
}performance.mark(‘functionStart’);
testingFor(arr);
performance.mark(‘functionEnd’);
performance.measure('functionMeasure', 'functionStart', 'functionEnd');
If you run this code in your browser console, you will receive an output like below where you can see all the details of the measure, including name and execution time.
If you need to get a specific measure or an execution time, Performance API provides another 3 functions.
performance.getEntries()- Returns everything stored in the performance entry buffer.performance.getEntriesByName('name')- Returns entries that match the given name.performance.getEntriesByType('type')- Returns entries of a specific type.
For example, we can get the execution time of the above code by using:
console.log(performance.getEntriesByName(‘functionMeasure’)[0].duration);Similarly, we can use these Performance Marks with JavaScript libraries and frameworks like React, Angular, Vue, etc.
Measure Performance Using Performance Marks in React
There are some specialized Chrome DevTools plugins like React profiler for React. However, using JavaScript built-in Performance APIs is still advantageous since we have more flexibility when testing JavaScript in general.
Let’s take a simple React component and use Performance.mark and Performance.measure to evaluate the component mounting time.
class Home extends React.Component {
render() {
performance.mark('ComponentMountStart');
// ...
}
componentDidMount() {
this.mounted = true;
performance.mark('ComponentMountEnd');
performance.measure('HomeComponentMount', 'ComponentMountStart', 'ComponentMountEnd');
}
}Likewise, you can use these Performance Marks in your React or any other JavaScript applications to easily evaluate execution times.
But, now you must be wondering, where we can see the results of these Performance Marks. Do we need to use console logs? → NO.
Apart from JavaScript running in the browser, Node.js has also extended its support for using Performance API from v15 onwards.
Performance Mark Logs in Chrome DevTools
Chrome DevTools can now log the Performance Mark events in the timing section under the Performance tab.
The below image shows the output of the timing section in DevTools for the React example discussed in the previous section.
According to the DevTools logs, the home component has taken 22.91ms to mount.
You can also notice many different timing logs in the Performance tab, and most of them are React‘s inbuilt timing logs.
The React inbuilt Timing logs with ⚛️ icons are recorded only in development mode.
Apart from that, you can use this timing section to evaluate many performance-related parameters, such as core web vitals. With these features, the Chrome DevTool Performance tab can now be considered as an all-in-one dashboard to monitor your application’s performance.
Final Thoughts
With my experience using Lighthouse, if we compare it with Performance Marks, the latter suits better to perform JavaScript code performance matrices.
In addition to that, the ability to use leading JavaScript libraries like React and integration with Chrome DevTools has increased the value of using Performance Marks.
In this article, I have only focused on a small section in JavaScript Performance API. So if you have time, try the other features, which help you broaden your understanding.
Thank you for reading !!!
