Written by

So I recently stumbled onto this lovely JavaScript designed to greatly improve user-interface performance from unorganized or excessive DOM reads and writes.

Sounds *suuuuuper* exciting, right? </sarcasm>

But there really is a real-world benefit to this script. If you have a moment, let me explain to you the joys of...

DOM Rendering

This is where the really technical mumbo jumbo happens, so I won't be offended [too much] if you decide to leave me. 😭

Here we go!

Document Object Model

The DOM is the invisible structure of all the elements within a webpage. It's what determines the order, flow, and hierarchy of your webpage based on your HTML markup.

As we know from my previous post, CSS is all the extra fluff and stuff for a website. What I didn't mention though is, CSS defines and also causes layout, paint, and composite alterations in your DOM.

But so does JavaScript.

When you measure and then change DOM elements in JavaScript, it requires a tiny, often insignificant calculation that usually takes a few milliseconds.

But when you do this many times over the course of your script's execution, these few milliseconds here and there add up to noticeable style reflows and repaints in your webpage. In more extreme cases, they can crash the browser.

We call this "layout thrashing."

This degrades the user experience for your end-user. And nobody likes bad user experiences!

So, how do you prevent such a thing from happening, oh great and wise Jeffrey?

Check out the source code if you're into that sort of thing.

What this script does is actually pretty darn smart. It gathers all of your read operations and brings them together. Then it gathers all of your write operations and brings those together afterwards, effectively eliminating layout thrashing completely.

Shebang! Just like that, the universe has achieved equilibrium again.

This is a very accurate depiction. 😜

If you like what I've written, follow my updates on Facebook and Twitter. Or you can susbscribe to email updates. This blog is brand-new, so it would be super fantastic if you would share it with your friends and colleagues! Thanks for reading!

Life is too short for bad websites!

Read my bio