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

itsvicki__
Sep 5, 2018 · 2 min read
Screenshot from Philip Robert’s explination, ‘What the heck is the event loop anyway?’
Illustration of a box of JavaScript buzz words such as ‘non-blocking’, ‘asynchronous’ and ‘single-threaded’

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
Illustration of a busy call stack; block rendering; causing an unresponsive website

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!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade