In web development, performance is a crucial factor that can impact user experience. Slow-loading websites can frustrate users, and they are more likely to leave the site before completing their desired action. Therefore, developers need to optimize their websites to make them load faster and run more efficiently. One tool that can help developers measure website performance is the Performance API, which provides several methods to measure website performance accurately. In this blog, we will discuss one of the most useful methods in the Performance API, performance.now().
What is performance.now()?
performance.now() is a method provided by the Performance API that returns a high-resolution timestamp. This timestamp represents the number of milliseconds elapsed since the start of the navigation timing. The navigation timing is a performance metric that measures how long it takes for a website to load and become interactive. The navigation timing starts when the user clicks a link or enters a URL in the browser’s address bar and ends when the website becomes fully interactive.
performance.now() provides a higher resolution timestamp than the regular JavaScript Date object. This higher resolution timestamp can help developers measure the performance of small code snippets more accurately. Additionally, performance.now() is not affected by changes in the system time, which can cause inaccuracies when using the Date object.
To use performance.now(), you can call the method in your JavaScript code, and it will return a high-resolution timestamp. Here is an example of how to use performance.now()
const startTime = performance.now();
for (let i = 0; i < 10; i++) {
console.log("Hii");
}
const finishTime = performance.now();
console.log(`Loop took ${finishTime - startTime } milliseconds.`);
In this example, we first call performance.now() and store the timestamp in the variable startTime. Then we run the code that we want to measure, and finally, we call performance.now() again and store the timestamp in the variable finishTime . We then subtract t0 from finishTime to get the total time that the code took to run and log it to the console.
You can use performance.now() to measure different aspects of website performance, such as the time it takes to load resources or the time it takes to render a page. For example, you can measure the time it takes for an image to load like this
Conclusion
performance.now() is a powerful tool for measuring website performance accurately. With the Performance API, developers can gain a better understanding of how their websites perform and optimize them for better performance. By using performance.now(), developers can measure the performance of small code snippets and different aspects of website performance, such as the time it takes to load resources or the time it takes to render a page.
