Online education portals like Udacity and Coursera are really changing the world of remote learning in significant ways. By making free and high quality education accessible to a global audience, these platforms are opening up undreamt of possibilities for communities around the world to improve, grow, and prosper in the digital economy of the 21st century. Education at top tier colleges and universities has traditionally been a social and economic privilege, but now anyone can join in the learning revolution by sitting in virtual classrooms with the world’s best and brightest educators. Whether this involves learning how to code and build smart phone apps, or starting up a new business, or learning about public health literacy, the sky is the limit of what’s now possible.

Everything about Web and Network Monitoring

Fix the Document Object Model (DOM) for performance

by | May 30, 2012

It is easy to be critical. It is much harder to present practical solutions. I hesitate to write critical articles if they do not offer a better way. However, even though this article does not offer a better way, DOM performance is the elephant in the room that must be talked about.

What’s Wrong With The DOM?

The DOM (Document Object Model) provides an API that lets programs flexibly and dynamically query and change a web browser’s contents. Through it, we can access pretty well anything that is displayed within the web browser.However, this benefit has its cost. Most programmers do not know how to access the DOM in a performance-optimal manner. Even those who do know the tricks of the DOM-masters face system-imposed limitations. They can go only so far. Handling the DOM has been identified by many experts as one of the top three performance problems across the entire World-Wide Web.The DOM’s performance issues stem from all of:

  • algorithms that do not scale well,
  • every individual DOM change triggers its own reflow, even if it’s part of a group of changes (recent changes have implemented batching, which is a big help, but more is needed),
  • the cascading nature of reflows (a change to one element can change many, many other elements),
  • the impact of a simple query (asking the DOM a formatting question can trigger a non-batched reflow),
  • the speed (or lack thereof) of the machine’s video subsystem, and
  • reflows, more reflows, and yet more reflows.

How To Fix It

And now we come to the part of the article where I have questions without answers. Please consider this a cry for help directed to those who have the technical skill and creativity to take on this task. [Artificial Intelligence experts, for example, may be able to make a significant contribution.]This raises another question: Can the DOM be fixed or must it be replaced? If we implement changes in baby steps, we may eventually arrive at a performance level we find acceptable. However, we may not. Perhaps a better interface between JavaScript and the displayed visuals is just waiting to be discovered. What do you think?

Conclusion

Everyone seems to agree on one point: For slow websites, the DOM is one of the most common culprits. I propose that the standard needs to be fixed, but recognize that this task requires a level of technical skill not commonly available.We are left with a question: Should we fix the DOM or replace it? I wonder what the answer will be.
Post Tagged with

Category: Website Performance | Tagged 1 Comment.

About Warren Gaebel

Warren wrote his first computer program in 1970 (yes, it was Fortran).  He earned his Bachelor of Arts degree from the University of Waterloo and his Bachelor of Computer Science degree at the University of Windsor.  After a few years at IBM, he worked on a Master of Mathematics (Computer Science) degree at the University of Waterloo.  He decided to stay home to take care of his newborn son rather than complete that degree.  That decision cost him his career, but he would gladly make the same decision again. Warren is now retired, but he finds it hard to do nothing, so he writes web performance articles for the Monitor.Us blog.  Life is good!
  • CodySCarlson

    The DOM seems to be a pretty highly advanced data-structure, though as stated in this article, performance-inhibited.

    I was wondering if anyone knows if the DOM’s performance is efficient for huge queries; if it is efficient for use in ‘Big-Data’ (if you will) type of queries; is it efficient if I wanted to store nodes with intricate relationships, and query them?

    Obviously, the DOM is a renderable data-structure, but I would like to speak of it as a data-store for the sake of efficiency & performance.