The Secret Life of Trees

A data structure that appears in the everyday life of a web developer

After graduating from the Grace Hopper Program last February, I accepted a Teaching Fellow position for the next cohort. My students often ask me how data structures relate to their lives as programmers, besides knowing how to ace white-boarding problems for job interviews. As someone who did not take CS course in college, I also struggled with data structures at first, but became fascinated once I realized that much of the underlying structure of software, including the browser, depends on them.

The first practice we had with trees as students was creating a Binary Tree, along with insertion, traversal, and search methods.

As we began to explore the browser, we learned how the browser’s render engine processes an HTML document and creates two trees: The DOM tree (Document Object Model), a tree representing HTML element and attribute nodes, and a CSSOM tree (CSS Object Model) of CSS styles.

These two trees are then combined into a render tree which contains the nodes and the styles needed to display DOM content on the page.

What is so fascinating about these trees is that, just like BSTs, they are often traversed recursively. For example, the CSSOM tree is recursively traversed. The browser processes the child nodes of the CSSOM tree first, because those specific style rules ultimately take precedence in the layout of the page. That means that as long as a node has children, a traversal function will continue to be called. Being able to show my students both use cases for trees AND recursion is really awesome!

Finally, the DOM tree and CSSOM tree are combined to form one last tree, the render tree!

Pretty cool, right?

Here’s a super helpful resource from Google’s Developer docs to learn more!