A few people asked me how I've been testing JavaScript performance timings. I use a really simple technique. Although this is a short post it might help someone. Let's go!
We'll be using the example of one of my latest Tweets where I've used the following code example:
const flatUnique = (data) => [...new Set([].concat(...data))]
const arr = [
'ReactJS',
['NextJS', 'ReactJS'],
['JavaScript', 'ReactJS'],
'JavaScript',
]
console.log(flatUnique(arr)) // ["ReactJS", "NextJS", "JavaScript"]
Alright, let's start by using performance, performance
comes with JavaScript and
has a lot of proto properties, if you open your developer tools console and type performance
you can see what I'm talking about. If you're too lazy to do that check this
image.
For this scenario we'll be using the .now()
function, let's take care of that:
const flatUnique = (data) => [...new Set([].concat(...data))]
const arr = [
'ReactJS',
['NextJS', 'ReactJS'],
['JavaScript', 'ReactJS'],
'JavaScript',
]
const start = performance.now()
console.log(flatUnique(arr)) // ["ReactJS", "NextJS", "JavaScript"]
What we're doing here is setting the current time, this is pretty much
the same thing as Date.now()
, right, so we've initialized that, let's move on.
Then we're running console.log
and calling our flatUnique
function, after that we
just need to apply simple math, let's add another code line and cover that:
const flatUnique = (data) => [...new Set([].concat(...data))]
const arr = [
'ReactJS',
['NextJS', 'ReactJS'],
['JavaScript', 'ReactJS'],
'JavaScript',
]
const start = performance.now()
console.log(flatUnique(arr)) // ["ReactJS", "NextJS", "JavaScript"]
const duration = performance.now() - start
We are, once again, using performance
to initialize .now()
, but this time we'll
subtract start
, our initial performance.now()
, this will return the time it took
since the first performance.now()
until the second one.
Now we just need to output the duration
value in some way:
const flatUnique = (data) => [...new Set([].concat(...data))]
const arr = [
'ReactJS',
['NextJS', 'ReactJS'],
['JavaScript', 'ReactJS'],
'JavaScript',
]
const start = performance.now()
console.log(flatUnique(arr)) // ["ReactJS", "NextJS", "JavaScript"]
const duration = performance.now() - start
console.log(duration)
I've just ran this test and returned 0.39499999955296516
, it'll differ every
time you run this, but you can have a general idea on how long it'll take to run
flatUnique
.