Avoid an Excessive DOM size

According to Google developers, a large Document Object Model (DOM) tree can harm page performance in a multitude of ways -- network efficiency, load performance, runtime performance and memory performance.

• Shipping a large DOM tree can often result in sending high levels of unnecessary bytes to a browser. If the browser is parsing too many nodes, it will result in slow page loads.
• A large tree coupled with numerous intricate style rules can slow rendering as users interact with your page.
• Using general query selectors such as document.querySelectorAll('li') can be unknowingly storing references that are unneeded.

How to avoid or fix this?

Some tips to improving performance through less DOM size:

• Avoid using DOM nodes or DOM elements unless they are necessary
• Find nodes that are not being displayed and eliminate them.
• Make sure parent nodes have less than 60 or less child nodes
• Minify CSS selectors for larger DOM trees