Learn about DOM elements

The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document—such as the HTML representing a web page—in memory. Usually, it refers to JavaScript, even though modelling HTML, SVG, or XML documents as objects are not part of the core JavaScript language. In this guide, we are going to learn about DOM elements.

DOM elements :

A DOM element is the part of an HTML page like a DIV tag. All the HTML tags are the elements of DOM on a page. You can add classes to all of these using CSS or interact with them using JS.

Role of DOM elements :

DOM elements increase DOM’s size, hence using more memory and causing higher memory usage, longer style calculations, and costly layout reflows. Reflow is the name of the web browser process for re-calculating the positions and geometries of elements in the document for the purpose of re-rendering part or all of the document. Continue reading to learn about DOM elements.

In short, a large DOM tree can slow down your page performance in multiple ways:

• Network efficiency and load performance: A large DOM often includes many nodes that aren’t visible when the user first loads the page, which unnecessarily increases data costs for your users and slows load time.
• Runtime performance As users and scripts interact with your page. The browser constantly re-computes the position and styling of nodes. A large DOM tree in combination with complicated style rules can severely slow down rendering. Hence slowing down the performance.

What increases the DOM size?

A DOM consists of elements. As the number of elements in DOM increases, the DOM size also increases.

Google’s popular webpage testing tool – PageSpeed Insights, includes DOM size and its element in testing a web page. It shows how a webpage is loaded and what resource usage can be optimized for faster loading and better serving of your webpage to the visitors.

Optimize the DOM:

We should focus on reducing the size of DOM. A smaller number of elements creates a small DOM tree and results in faster loading.

• Minimize the Number of CSS Rules
  The fewer rules you use, the quicker the reflow. You should also avoid complex CSS selectors where possible.
• Minimize DOM depths
  Reduce the size of your DOM tree and the number of elements in each branch, i.e., remove unnecessary tags.
• Modify Hidden Elements
  Elements hidden with display: none; will not cause a repaint or reflow when they are changed. If practical, make changes to the element before making it visible.

Now you have learned about DOM elements. You can implement this knowledge on your website to improve your website scores.

Need to develop Progressive web app ? Read more about Progressive web apps here.