Having sympathy for the browser will make you a better JS developer


We all know the buzz words…
But how many of us, when copying that highly rated, obviously super trust worthy solution from Stack Overflow, thought about the consequence on browser performance and ultimately User experience?
Approach everything with the question, ‘now, or later?’
There are two kinds of now and later that I’ve been using…
Above-the-fold kind of now
Separating your JavaScript into what you absolutely need in order to have an interactive above-the-fold page experience for Users, and defer (or async, depending on your requirements) the rest of the code so the browser can get on with its rendering.
We need to run this function now
All JavaScript execution runs through the queue of all queues, the ‘call stack’.
- It’s what is so vitally ‘single-threaded’ about JavaScript - meaning it can only deal with a function at a time
- It’s what can so easily become overloaded
- When overloaded it also blocks the render queue which in turn stops Users from being able to interact with the site and our changes being seamless

Start adding more asynchronous functions, prioritise functions, utalise the event loop and give the render queue frequent chances to run.
For more detailed information I highly recommend the below talk by Philip Roberts as a starting point, followed by Shelley Vohr’s talk.
Link to loupe — you’ll thank me later!
