Measuring Performance with Javascript's performance.now()

As developers, it's essential to have tools and techniques in our arsenal to measure and optimize the performance of our code. In JavaScript, one powerful tool we can utilize is the performance.now() method. This method provides a high-resolution timestamp, allowing us to accurately measure the execution time of our JavaScript code. In this article, we will delve into how we can leverage performance.now() to measure performance and track improvements in our JavaScript applications.

Getting Started with performance.now()

The performance.now() method is part of the Performance API, which provides access to various timing-related information and performance-related metrics. It returns the number of milliseconds elapsed since the document started loading. The returned value is a DOMHighResTimeStamp, which is a floating-point value with microsecond precision.

To use performance.now(), simply call the method within your JavaScript code:

Copycopy code to clipboard
1const startTime = performance.now();
2
3// Code snippet to be measured
4
5const endTime = performance.now();
6const elapsedTime = endTime - startTime;
7
8console.log(`Execution time: ${elapsedTime} milliseconds`);

In the code snippet above, we capture the start time using performance.now() before the code we want to measure and then capture the end time after the code execution completes. By subtracting the start time from the end time, we obtain the elapsed time in milliseconds.

Measuring Execution Time

Let's explore a practical example to see how we can measure the performance of a JavaScript function using performance.now(). Suppose we have a function that calculates the nth Fibonacci number recursively:

Copycopy code to clipboard
1function fibonacci(n) {
2  if (n <= 1) return n;
3  return fibonacci(n - 1) + fibonacci(n - 2);
4}

To measure the execution time of this function, we can use performance.now() as follows:

Copycopy code to clipboard
1const startTime = performance.now();
2const result = fibonacci(40);
3const endTime = performance.now();
4const elapsedTime = endTime - startTime;
5
6console.log(`Execution time: ${elapsedTime} milliseconds`);

In this example, we measure the time it takes to calculate the 40th Fibonacci number. By capturing the start and end times and calculating the elapsed time, we can analyze the performance characteristics of our code.

Tracking Performance Improvements

One of the most valuable use cases of performance.now() is tracking the impact of performance optimizations. Suppose we want to compare the performance of two different approaches to calculate Fibonacci numbers. We can measure the execution time of each approach and observe the improvements. Let's consider an iterative approach to calculate Fibonacci numbers:

Copycopy code to clipboard
1function fibonacciIterative(n) {
2  if (n <= 1) return n;
3
4  let previous = 0;
5  let current = 1;
6
7  for (let i = 2; i <= n; i++) {
8    const next = previous + current;
9    previous = current;
10    current = next;
11  }
12
13  return current;
14}

To compare the two approaches, we can measure the execution time of each function:

Copycopy code to clipboard
1const n = 40;
2
3const recursiveStartTime = performance.now();
4const recursiveResult = fibonacci(n);
5const recursiveEndTime = performance.now();
6const recursiveElapsedTime = recursiveEndTime - recursiveStartTime;
7
8const iterativeStartTime = performance.now();
9const iterativeResult = fibonacciIterative(n);
10const iterativeEndTime = performance.now();
11const iterativeElapsedTime = iterativeEndTime - iterativeStartTime;
12
13console.log(`Recursive execution time: ${recursiveElapsedTime} milliseconds`);
14console.log(`Iterative execution time: ${iterativeElapsedTime} milliseconds`);

By measuring the execution time of both approaches, we can determine which one performs better in terms of speed. This information is valuable for making informed decisions about code optimizations.

In Closing

Measuring performance is crucial for optimizing JavaScript applications. With performance.now(), we can accurately measure the execution time of code snippets and track performance improvements. By capturing start and end times and calculating the elapsed time, we gain insights into the performance characteristics of our code. Whether it's measuring the execution time of a single function or comparing different approaches, performance.now() empowers us to make informed decisions about performance optimizations.