DOM Performance Tips and Tricks

As Web pages and applications become richer, more data driven, and more dynamic, the need to improve performance becomes more important. One key area where performance gains can often be achieved is when accessing and manipulating the Document Object Model (DOM). While the DOM can be a very powerful tool, it can be a potential performance pitfall when not used correctly. This article addresses some common methods to ensure high performance use of the DOM. Engineering your code with performance in mind from the beginning is generally easier than reengineering poorly performing sites. However, many of the tips and tricks in this article can be implemented after the fact as point fixes.

This topic contains the following sections:

• Understanding the DOM
• Avoid Time-intensive API's
• Use Smart Coding Patterns
• • Tip 1: Use IE8 Standards Mode
  • Tip 2: Minimize DOM Access
  • Tip 3: Cache Objects When Possible
  • Tip 4: Use the Selector API
  • Tip 5: Use Event Delegation
• Finding DOM Intensive Code

Understanding the DOM

Basic knowledge of how the DOM works in Internet Explorer is helpful for understanding the origins of some of the performance gains mentioned in this article. The DOM is initially constructed as the web page is parsed. However, it is constantly adjusted and updated as the web page is manipulated by either user, programmatic, or browser interaction. For those unfamiliar with the structure and capabilities of the Internet Explorer DOM, About the W3C Document Object Model is an excellent starting point.
An important aspect of the DOM is described in Figure 1. Simply put, DOM access is much more expensive than most other JavaScript. This is partly due to the immense nature of the DOM and partly due to the fact that DOM access requires the use of an internal interface layer because it is not a native part of the JavaScript language itself. Nevertheless, that is not to say that DOM access should be avoided altogether. Rather, minimizing unnecessary DOM interactions can often yield performance gains.

Figure 1: DOM Performance Costs

Source : http://msdn.microsoft.com/en-us/library/ee358802%28VS.85%29.aspx

Related Posts:

• CSS Best Practices and Cross-browser CompatibilityThis article is consolidation of the best practices which are followed or taken care during the development when a web page is styled using a external or inline style sheet referred to as CSS (Cascading Style Sheet). The best… Read More
• Modular CSS framework for building classy websitesThe Classy Web Design Framework A modular framework for rapid web development Sparkl combines POSH markup, Bulletproof CSS and Unobtrusive JavaScript into one easy to use web development framework that makes it simple to cre… Read More
• DOM Performance Tips and TricksAs Web pages and applications become richer, more data driven, and more dynamic, the need to improve performance becomes more important. One key area where performance gains can often be achieved is when accessing and manipul… Read More
• Modular CSS framework for building classy websitesThe Classy Web Design FrameworkA modular framework for rapid web developmentSparkl combines POSH markup, Bulletproof CSS and Unobtrusive JavaScript into one easy to use web development framework that makes it simple to create… Read More
• CSS Best Practices and Cross-browser CompatibilityThis article is consolidation of the best practices which are followed or taken care during the development when a web page is styled using a external or inline style sheet referred to as CSS (Cascading Style Sheet). The best… Read More