Reduce the Number of DOM Elements | Best Practice to Speed up your Website

A complex page means more bytes to download and it also means slower DOM access in Javascript. It make difference if you are looping through lots of DOM elements on page to add an event handler.

Are you using nested tables for layout purpose? Are you throwing in more

s only to fix the layout issues? May be there’s a better, more effective and semantically correct way to do your markup.

[gads]

A great help with layouts are the YUI CSS Utilities: grid.css can help you with overall layout, fonts.css and reset.css can help with you strip away browser’s default formatting.

The number of DOM elements are easy to test, just type in Firebug’s console:

[cc lang=”php”]
document.getElementsByTagName(‘*’).length
[/cc]

[gads]

And how many DOM elements are too many? Check other similar pages that have good markup. For example the Yahoo! Home Page is a pretty busy page and still under 700 elements (HTML tags).

Source : Yahoo Tips

Tags: