If we have a sophisticated website, that means we have to download more bytes and slower DOM access in JavaScript. There is a difference between looping through 500 DOM elements versus 5,000 DOM elements, if you need to add an event handler to an element.
If a page has a huge number of DOM elements, it means that there is room for improvement. So, you should go through with your code and enhance it without removing valuable content.
Using a CSS framework such as Bootstrap or Foundation can eliminate those issues, because they have a proper structure. Also, using the reset.css
style sheet file, the developer can remove default browser formatting. Additionally, if you are going to use a new HTML
tag, use it only when it makes sense semantically, and not because it renders.
Finally, testing the number of DOM elements on a page is easy. Simply type the following command in browser toolbar console:
document.getElementsByTagName('*').length