Measuring the execution times of a code snippet can be essential as a form of debugging, especially when some other component is time-dependent on that piece of code for its execution (e.g. animations).
There are mainly three ways in which this can be done:
1. Using Date.now()
The static Date.now() the method returns the number of milliseconds elapsed since January 1, 1970, 00:00:00 UTC
const t1 = Date.now();
let sum = 0;
const calculateSum = () => {
for (let i = 1; i <= 100; i++) {
sum += i;
}
console.log(`Total sum: ${sum}`);
}
calculateSum();
const t2 = Date.now();
const result = t2 - t1;
console.log(`Execution time: ${result} milliseconds`);
// Output
// Total sum: 5050
//Execution time: 5 milliseconds2. Using console.time()
Starts a timer you can use to track how long an operation takes. You give each timer a unique name, and may have up to 10,000 timers running on a given page. When you call console.timeEnd() with the same name, the browser will output the time, in milliseconds, that elapsed since the timer was started.
See Timers in the console documentation for details and examples.
console.time('sum');
let sum = 0;
const calculateSum = () => {
for (let i = 1; i <= 100; i++) {
sum += i;
}
console.log(`Total sum: ${sum}`);
}
calculateSum();
console.timeEnd('sum');
// Output
// Total sum: 5050
// sum: 5.410ms3. Using Performance.now()
The performance.now() method returns a DOMHighResTimeStamp, measured in milliseconds.
Note: This feature is available in Web Workers
The returned value represents the time elapsed since the time origin.
Bear in mind the following points:
- In dedicated workers created from a Window context, the value in the worker will be lower than performance.now() in the window that spawned that worker. It used to be the same as
t0of the main context, but this was changed. - In shared or service workers, the value in the worker might be higher than that of the main context because that window can be created after those workers.
It’s important to keep in mind that to mitigate potential security threats such as Spectre, browsers typically round the returned value by some amount in order to be less predictable. This inherently introduces a degree of inaccuracy by limiting the resolution or precision of the timer. For example, Firefox rounds the returned time to 1 millisecond increments.
The precision of the returned value is subject to change if/when the security concerns are alleviated through other means.
const { performance } = require('perf_hooks');
const t1 = performance.now();
let sum = 0;
const calculateSum = () => {
for (let i = 1; i <= 100; i++) {
sum += i;
}
console.log(`Total sum: ${sum}`);
}
calculateSum();
const t2 = performance.now();
const result = t2 - t1;
console.log(`Execution time: ${result} milliseconds`);
// Output
Total sum: 5050
Execution time: 5.187489032745361 milliseconds
