How to Time Your Code
Greetings, friends! When writing code, it'd be nice to measure how long it takes to run. Maybe you want to import a library for handling dates such as luxon or date-fns, but don't know which one is faster. Or, you want to compare the time complexity of multiple algorithms. This is where the console.time method comes in handy!
Timing Your Code
We can use console.time paired with console.timeEnd to measure how long it takes our code to run. Let's look at an example.
console.time();
for (let i = 0; i < 100000; i++) {
const square = i ** 2;
}
console.timeEnd();
In Google Chrome, you can open up the Chrome DevTools console using the keyboard shortcut Option + Command + J on a Mac or Ctrl + Shift + J on Windows. When you run the code snippet above in the console, you should something similar to the following.
default: 1.461181640625 ms
The time will most likely be different on your computer than mine. There are tons of variables to consider when measuring performance: computer hardware specifications, JavaScript engine speed, compiler cache, and more! If you were to run this code again, then you may see the code run faster or slower. Depending on the code and the JavaScript engine, caching could help speed things up. Therefore, when measuring the time it takes your code to run, you should view it as an estimate. It's better to look at the timestamp for a particular operation relative to another timestamp and operation.
If we run the following code instead, we should expect the time to increase because we're adding two additional operations during each iteration of the for loop.
console.time();
for (let i = 0; i < 100000; i++) {
const square = i ** 2;
square ** 3;
square ** 4;
}
console.timeEnd();
When I run this code on my computer, I end up with the following:
default: 3.803955078125 ms
It's also possible to create multiple timers by passing a label to the console.time function. Make sure to pass the same label to console.timeEnd!
console.time('squaring');
for (let i = 0; i < 100000; i++) {
const square = i ** 2;
}
console.timeEnd('squaring');
console.time('cubing');
for (let i = 0; i < 100000; i++) {
const cube = i ** 3;
}
console.timeEnd('cubing');
When this code is run, you'll see the label you specified instead of default.
squaring: 1.993896484375 ms
cubing: 0.943115234375 ms
In the code above, we can compare how long it takes to cube 100000 numbers versus squaring 100000 numbers. Cubing a number is raising it to the power of three. Squaring a number is raising it to the power of two.
Interestingly enough, cubing numbers seem faster than squaring numbers, but we know this may not be accurate due to optimizations in the JavaScript engine. Let's try swapping the order of operations. We'll run a for loop that cubes numbers first and then run a for loop for squaring numbers.
console.time('cubing');
for (let i = 0; i < 100000; i++) {
const cube = i ** 3;
}
console.timeEnd('cubing');
console.time('squaring');
for (let i = 0; i < 100000; i++) {
const square = i ** 2;
}
console.timeEnd('squaring');
Even after running this code multiple times, I end up with the second for loop running faster than the first.
cubing: 2.77099609375 ms
squaring: 0.9697265625 ms
Hopefully, these examples show why timing code can be tricky. It may seem like one operation is faster than the other, but the order of your code can play a role in determining which timestamp is smaller.
Measuring the Timer Value Before timeEnd
We can use the console.timeLog method to measure the current value of a timer before the console.timeEnd method is called. The timer will continue going after the console.timeLog method is called. This allows us to get an idea of how long intermediate steps take within a single timer.
Let's look at an example. We'll use the old alert function to make two dialogs appear.
console.time('response time');
alert('Click to continue');
console.timeLog('response time');
alert('Click again');
console.timeEnd('response time');
When you run the code above, we'll see two timestamps similar to the following.
response time: 1022.244873046875 ms
response time: 2136.296142578125 ms
After clicking the first one, the console.timeLog function will log a timestamp using the same label, response time. Then, we'll see another timestamp appear after clicking the second dialog popup.
Conclusion
The console.time and console.timeEnd methods can be used to measure the performance of your code. With these methods, you can measure how long it takes operations such as functions to run. If you need a timestamp with a higher resolution, then you should go with performance.now or Benchmark.js.