JavaScript is said to be a Prototype-based language. So “prototypes” must be an important concept, right?
Today I’m going to explain what Prototypes are, what you need to know, and how to use Prototypes effectively.
I was curious about testing JavaScript performance and did some research on it.
When I talk about JavaScript performance here, I’m not talking about things like time-to-first-byte, time-to-interaction, etc… I’m talking about raw computing speed – how long does function X run compared to function Y.
I discovered we can use two methods to test performance – performance.now and Date.now. I was curious about the difference between them, so I made some experiments to document my findings.
The procedure for testing performance is simple. There are three steps:
The difference between the two timestamps will be the amount of time needed to run the operations.
Here’s what this process looks like in code:
const start = performance.now()
// Do stuff
const end = performance.now()
const elapsed = end - start
console.log(elapsed)
performance.now is said to generate a Dom high-res timestamp, which means it’s going to be more accurate than Date.now.
Unfortunately, browsers have to round off this timestamp because of security issues, so it doesn’t make much of a difference in the end (according to my findings).
To help with the tests, I created a perf function.
function perf (message, callback, loops = 1) {
const startTime = performance.now()
while (loops) {
callback()
loops = loops - 1
}
const endTime = performance.now()
const elapsed = endTime - startTime
console.log(message, elapsed)
}
I also created a Date.now equivalent and I named it perfDate
function perfDate (message, callback, loops = 1) {
const startTime = Date.now()
while (loops) {
callback()
loops = loops - 1
}
const elapsed = Date.now() - startTime
console.log(message, elapsed)
}
I tested both performance.now and Date.now with a simple operation:
function test () {
return 1 + 1
}
While testing, I realised there’s no point in testing one operation because of two reasons.
First, performance.now can measure operations in microseconds but Date.now can’t. So we won’t be able to see the differences between them.
Second, performance.now gets rounded off to the nearest millisecond in Safari and Firefox. So there’s no point comparing anything that takes less than 1ms.
I had to increase the tests to 10 million operations before the numbers begin to make sense.
I ran this code:
const count = 10000000
perf('Performance', _ => { return 1 + 1 }, count)
perfDate('Performance', _ => { return 1 + 1 }, count)
Here, I found no major difference between performance.now and Date.now.
However, performance.now seems slower on Safari and Firefox. performance.now also gets rounded to the nearest millisecond on Safari and Firefox.
I tried stacking perf and perfDate functions to see if there were any differences. The results startled me.
const count = 10000000
perf(‘Performance’, _ => { return 1 + 1 }, count)
perf(‘Performance’, _ => { return 1 + 1 }, count)
perf(‘Performance’, _ => { return 1 + 1 }, count)
perfDate(‘Date’, _ => { return 1 + 1 }, count)
perfDate(‘Date’, _ => { return 1 + 1 }, count)
perfDate(‘Date’, _ => { return 1 + 1 }, count)
Second and Third tests on Chrome for both perf and perfDate jumped from 8ms to 80ms. That’s a 10x increase. I thought I was doing something wrong!
I discovered this increase was caused by defining functions on the fly. If I used a predefined function, the numbers reduced back to 8ms.
function test () {
return 1 + 1
}
const count = 10000000
perf(‘Performance’, test, count)
perf(‘Performance’, test, count)
perf(‘Performance’, test, count)
perfDate(‘Date’, test, count)
perfDate(‘Date’, test, count)
perfDate(‘Date’, test, count)
Note: I also found out that Node’s performance.now has the same behaviour as Chrome’s performance.now.
I realised each performance.now and Date.now resulted in different values. I wanted to get an average of the results, so I added another loop to perf.
(I did the same to perfDate too).
function perf (message, callback, loops = 1, rounds = 10) {
const results = []
while (rounds) {
const startTime = performance.now()
while (loops) {
callback()
loops = loops - 1
}
const endTime = performance.now()
const elapsed = endTime - startTime
results.push(elapsed)
rounds = rounds - 1
}
const average = results.reduce((sum, curr) => curr + sum, 0) / results.length
console.log(message)
console.log(‘Average’, average)
console.log(‘Results’, results)
}
But the results were strange: the elapsed timing for the second loop onwards dropped to zero. This happened for both perf and perfDate.
It also happened for all three browsers!
I’m not sure what’s wrong here. If you know why, please tell me!
Both performance.now and Date.now can be used to test for JavaScript performance. There isn’t a major difference between these two methods though.
When testing on Chrome, make sure you use predefined functions. Don’t define functions on the fly or you’ll get inaccurate tests.
I saw an article about Leading Trim and I AM THRILLED. I hope Leading Trim gets into production soon!
I complied a list of useful JavaScript stuff into a Github repository.
This repository includes code for functions like:
And many others.
I get this question once in a while from students who bought one of my books or courses. Each time, my answer is No.
I wanted to give a thorough reasoning behind why I say No, and how this No helps me focus on the content I want to create.
I often get requests from people who want me to look through their work and provide them with feedback. While asking for feedback is a praise-worthy thing – because you want to improve – I don’t have the time and resources to give feedback to everyone.
I suspect that’s the case for others too. We’re all busy.
When I ask others for feedback, sometimes I don’t get responses. Sometimes I get subpar responses. I found it hard to get specific, detailed, and actionable advice from people unless they have a skin in the game for helping me out.
For example: You’re paying for their services, so they have an incentive to help you. Another example: You’re in a project together with them; if you succeed they succeed.
If you get specific and helpful feedback, great! Use that feedback and improve. But the question remains: How can you improve if you don’t get feedback?
I saw an article by Sarah Drasner about how she created Netlify’s million-developers site on CSS Tricks. I was intrigued by how the site was created. (Not the Vue parts, but she coded up the paths on the site).
What paths?
Here’s the Mobile and Desktop view, side by side. I’m talking about the winding paths that lead from one set of content to another set of content.
I always wanted to create a site with curved elements, similar to this. So I took the chance to inspect the code. What I realised blew my mind 🤯.
I am SO EXCITED to share this news with you today. I’m going to give away 99 copies of The Coding Career Handbook by Shawn Wang.
These copies are at the second-tier package that’s priced at $99.
I was living a comfortable life back in 2014. I was living my dreams. I freelanced and I earned an equal amount to my friends who held full-time jobs. I was free.
Or so I thought.
The first three years of freelancing were exciting. I simply loved hopping around different agencies, creating websites for a living, making friends, and knowing more people. I felt I could do this forever. But I was wrong.
Getter and Setter functions are collectively known as accessor functions. In my previous two articles, I talked about how I created mix because I wanted to use Getter and Setter functions.
But why do we even use Getters and Setters in the first place?
I have two reasons.