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...
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 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?
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.