If you are going to have a nicely presented website with a lot of animations, images, and contents, you will surely have thousands of DOM elements to be parsed by web browsers to display the page properly. More the number of DOM elements, more the time it would take to load. So, we need to reduce it to a minimal count through different methods. If your website loads slowly and any event is getting delayed due to JavaScript DOM access, it may happen due to excess number of DOM elements. This can be improved by taking care of and by adjusting HTML tags without hampering the actual content or its functions or display.
Run the following command on Firebug's console under the Script tab on whichever website you wish to check the total number of DOM elements:
alert(document.getElementsByTagName('*').length);
For Google.com, it came up to be 325 and for Aliencoders.com, it came up to be 2411.
There is scope of eliminating a few unnecessary tags that are not going to participate in the website's content, layout, and functions, such as nested <div>
and <span>
tags, which can arrange things properly. This can be done even without making unnecessary nested div
tags.
If you are using tables or even nested ones, immediately switch to tableless layout with the help of CSS. If any tag is written for comment purposes, we can remove it in our production website.
When any web page uses JavaScript or a JavaScript library, such as jQuery, to display the content or to search the content, it would always start the search from the beginning of the DOM elements. More DOM elements would mean you are compromising with the page loading time and patience of the users.
So, when your website's layout is dependent on CSS and JavaScript, which is but obvious in this era, every DOM elements would be matched with CSS to display it in the desired way. So, less DOM elements means spending less time on CSS and JavaScript matching, which will display the page faster to the end users.
You may try the YUI framework (http://yuilibrary.com/) for your JavaScript and CSS files provided by Yahoo!.