I've been working on a web component on this blog, where its elements will update as the user scrolls up and down the page.
It's important that the function(s) called when the user scrolls will execute quickly.
If they take too long, then there will be a noticeable delay between the user navigating to part of a page, and the component updating.
Fortunately, there are three quick ways to test this using the console.
Using performance.now()
First, lets look at a script that would take a while to run:
for (var i = 0, j = 0; i < 100000000; i++) {
j += i
}
console.log(`All added up: ${j}`)
Now, let's use performance.now() to calculate exactly how long it takes:
// Begin the timer
var t0 = performance.now()
// Run the time consuming task
for (var i = 0, j = 0; i < 100000000; i++) {
j += i
}
console.log(`All added up: ${j}`)
// End the timer
var t1 = performance.now()
console.log(`Time taken : ${t1 - t0} ms`)
All added up: 4999999950000000
Time taken : 1894.3549999967217 ms
Using console.time()
Alternatively, you could use console.time() to get the same result:
// Begin the timer
console.time("Time taken");
// Run the time consuming task
for (var i = 0, j = 0; i < 100000000; i++) {
j += i
}
console.log(`All added up: ${j}`)
// End the timer
console.timeEnd("Time taken");
By calling console.timeEnd() after the script has executed, it will automatically output the result to the console:
All added up: 4999999950000000
Time taken: 1791.7841796875 ms
Note that you need to use the same label for both the call to time and timeEnd.
Using the Date object
Finally, you can also use the Date object:
// Begin the timer
var t0 = Date.now()
// Run the time consuming task
for (var i = 0, j = 0; i < 100000000; i++) {
j += i
}
console.log(`All added up: ${j}`)
// End the timer
var t1 = Date.now()
console.log(`Time taken : ${t1 - t0} ms`)
Subtracting one from the other will give the result in milliseconds:
All added up: 4999999950000000
Time taken : 1915 ms
Differences between the three
It's important that our method of logging time doesn't take too long to execute. And at first glance, it would appear that console.time was the fastest solution, since it had the fastest time.
However, all three script execution times varied greatly on my machine, between 1600ms and 2200ms, regardless of how it was timed.
There may be a very small difference between the three in terms of performance, but I'd guess the difference is so small it isn't worth considering, particularly for this example.
So, when would you use one method over the other? Here's what I do:
- If I just need a quick output, console.time() and console.timeEnd() is simple to add, and requires no formatting.
- If I wanted to easily track multiple timers in the same code under different labels, with different start and end positions, console.time() is also very useful.
- If I want to store the time and use it later (for instance, to log it in a database), I would use performance.now()