This content originally appeared on Bits and Pieces - Medium and was authored by Lina Suodyte
Have you heard of performance.now()?
It is a Performance API method that returns a DOMHighResTimeStamp (which stands for “High Resolution Time Stamp”), which, in simple words, is a time value in milliseconds in the fractional part between two points in time.
The most common use case for performance.now() is monitoring the time in which a piece of code is executed. Real life use cases could include benchmarking and monitoring performance of video, audio, games and other media.
So how does it work? Let’s say, we want to monitor how long it takes for a specific function to run.
We call the method once before we start running our function, then run the function itself and then call performance.now() again. Since both instances of performance.now() return the time elapsed from the page load and we have the same starting point, we only need to get the difference between the two function calls to see how long it took for our code to run.
const startTime = performance.now();
for (let i = 0; i < 100; i++) { console.log("Hi!");}
const finishTime = performance.now();
console.log(`It took me ${finishTime - startTime} milliseconds to say "hi" a 1000 times!`);
You might have seen Date.now() being used for this purpose as well. It is a valid and common approach to performance monitoring but there is one caveat.
The biggest difference between performance.now() and Date.now() is that Date.now() returns a timestamp in relation to the Unix time (time passed from 00:00:00 UTC, 1 January 1970). This is where we potentially face an issue. How does JavaScript know how much time has elapsed since this date? It gets it from the system clock. But since the system clock lives in our machine, it can be adjusted manually or programmatically, therefore, time precision cannot be guaranteed.
In this situation, performance.now() is more reliable. It depends neither on a specific point in history nor on our system because it returns the number of milliseconds that have passed since the beginning of the document’s lifetime.
A quick note: for security reasons, the time returned from performance.now() is rounded, so it can be less predictable. However, the inaccuracy does not matter much if we’re using it for personal testing.
performance.now() has full support in all modern browsers, starting from Chrome 24, Firefox 15, and IE10.
Build with independent components, for speed and scale
Instead of building monolithic apps, build independent components first and compose them into features and applications. It makes development faster and helps teams build more consistent and scalable applications.
OSS Tools like Bit offer a great developer experience for building independent components and composing applications. Many teams start by building their Design Systems or Micro Frontends, through independent components. \
An Introduction to performance.now() was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Lina Suodyte
Lina Suodyte | Sciencx (2022-01-21T14:50:36+00:00) An Introduction to performance.now(). Retrieved from https://www.scien.cx/2022/01/21/an-introduction-to-performance-now/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.