Skip to main content

Avoid an excessive DOM size


Web browsers convert the HTML from the server into a Document Object Model (DOM) to further process the web page. Each HTML element, for example, one div, is then one node in the DOM. The amount of nodes defines the memory requirements in the browser and the needed time to display and update the page. The greater the amount of nodes that are defined in HTML, the greater the time spent processing and rendering each element. Additionally, each interaction with the DOM from Javascript needs more processing time and more memory to traverse the DOM elements.


Keep the necessary HTML as small as possible and strip unneeded elements from it. Use advanced strategies of the frontend framework used to reduce the DOM size additionally. When rendering large lists, for example, use these techniques:

SCI Impact

SCI = (E * I) + M per R Software Carbon Intensity Spec

Optimizing the DOM size will impact SCI as follows:

  • E: Reduces the processing and memory requirements to display the page and therefore the energy requirements.


  • There is an assumption that the framework and/or the environment allows for changing the HTML structure or rendering path.