Avoid an Excessive DOM Size

The Document Object Model, or DOM or DOM tree, is the structure that represents the XML or HTML (HyperText Markup Language) documents. It is a map, or technically an API (Application Programming Interfaces), that is used by the browser (and developers) to read, access, build, delete, and update all the elements of a web page. One of the major benefits of the DOM is that it is language agnostic and is an industry and programming standard that can be used with all languages and frameworks. The DOM structure itself is made up of a variety of nodes. And these nodes are objects that can be added into the structure of the DOM. And like other objects, nodes can be modified to include different properties and methods. There are a variety of different nodes that make up the DOM. They are also given a number as a unique identifier and can also include sub-nodes, or what are known as children nodes. The list below includes the 12 distinct types of main nodes that make up the DOM:

• • Element (1). These are one of the most common types of nodes and they represent all the HTML elements on a page.
  • Attr (2). The Attr node is used to represent the name of a document.
  • Text (3). Text nodes are the text values found inside of the element nodes as attributes.
  • CDATASection (4). This node is not commonly used but is short for “Character Data.” This is used to differentiate between character data and markup data, so it can be ignored by the parser and not part of the page’s markup.
  • EntityReference (5). An EntityReference is a group of characters that can be used as a substitute for another character, word, or phrases. It helps differentiate between a literal character and a markup character. These nodes always follow the same format. They begin with an ampersand and end with a semicolon.
  • Entity (6). The Entity node represents the actual entity (parsed or unparsed) in the XML document and can also include various attributes.
  • Processing Instruction (7). This node is responsible for sending instructions to specific applications within the document that recognize the instructions.
  • Comment (8). The Comment nodes are HTML comments.
  • Document (9). The Document node refers to the entire HTML document.
  • DocumentType (10). The DocumentType node is responsible for handling the document type and communicating to the browser what language, HTML standard, or any other markup language, is being used.
  • DocumentFragment (11). The DocumentFragments can contain a collection of nodes that can be used for inserting a group of elements or text elements into a document.
  • Notation (12). This represents a notation within the Document Type Definition, or DTD.

When we talk about documents within the DOM, it can refer to multiple things, such as HTML, XML, CSS (Cascading Style Sheets), JavaScript. The objects are what define help define the tags and elements of the file. The model is the layout, or structure.

When a user visits your site, the server sends all the HTML to the browser, which is then converted into the DOM. Additionally, any JavaScript code that is used with page will interact with the DOM as an API for the HTML. For example, using JavaScript, programmers can change/remove HTML elements, update CSS styles, create action on clicks, form submissions, etc., and more. This provides a more interactive and dynamic environment for users, helping to keep them engaged with your pages.

As you can see, the DOM can become a complex, and sometimes confusing structure to have to manage. The larger the document, the more CPU and memory are needed to process all the nodes and branches. The tradeoff between providing a complex, dynamic user experience with a bunch of JavaScript and ensuring page load times stay within expectations are important considerations. Lighthouse will trigger a warning if your DOM contains more than 1,500 elements. Sometimes, there is just not a lot you can do to avoid your DOM becoming too large, but as you are building pages, ensure that there are not too many CMS (Content Management System) themes used, as these can add to the number of additional elements. And in some cases, they really do not add to the functionality of your pages, so remove them if possible.