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