Lesson Outline

Interacting with the DOM Efficiently

One of the biggest performance bottle necks in Ionic applications (and all web applications) is the DOM (Document Object Model). The DOM is what describes the structure of our application. As the DOM increases in size, interacting with it can become more expensive. More DOM elements means more calculations for the browser rendering process, and as we know, slowing down that process too much is going to lead to poor performance.

It is critical that when we are working with the DOM that we do so efficiently, and there are a couple of "gotchas" that can really destroy the performance of your application. In this lesson, we are going to focus on the concept of DOM Thrashing and how to avoid it.

What is DOM Thrashing?

Your biggest enemy. We've already touched on why it is best to avoid triggering Layouts where all the positions of elements on the page need to be recalculated (as much as possible at least, Layouts are a necessary step in browser rendering). DOM Thrashing is pretty much triggering layouts on rapid fire mode.

To understand the cause of DOM Thrashing, and what it means exactly, we need to first understand what a forced synchronous layout is. We are already familiar with the process of how the browser creates a frame, which goes like this:

Image from developers.google.com licensed under the Creative Commons Attribution 3.0 License

Assuming that all of the steps are necessary, they all occur one after the other. However, it is possible to trigger a forced synchronous layout where the layout step is triggered earlier on in this process.

This problem can occur when we do reads from the DOM and writes to the DOM out of order. For example:

This is good