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

  • Avinash
  • 0
  • Aug 11, 2010
  • Web Development

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.

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:

document.getElementsByTagName('*').length
document.getElementsByTagName('*').length

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

Related Posts

Written by Avinash

Avinash Zala is leading various projects which deals with the various technology involved with the web. A combination of perfect technical and management skills. Avinash would like to chat with you and convert your imagination into the working system. You can get in touch with him on Facebook and Twitter.

View all posts by: