High Performance JavaScript

Chapter 3. DOM Scripting

Stoyan Stefanov

DOM scripting is expensive, and it’s a common performance bottleneck in rich web applications. This chapter discusses the areas of DOM scripting that can have a negative effect on an application’s responsiveness and gives recommendations on how to improve response time. The three categories of problems discussed in the chapter include:

• Accessing and modifying DOM elements

• Modifying the styles of DOM elements and causing repaints and reflows

• Handling user interaction through DOM events

But first—what is DOM and why is it slow?

DOM in the Browser World

The Document Object Model (DOM) is a language-independent application interface (API) for working with XML and HTML documents. In the browser, you mostly work with HTML documents, although it’s not uncommon for web applications to retrieve XML documents and use the DOM APIs to access data from those documents.

Even though the DOM is a language-independent API, in the browser the interface is implemented in JavaScript. Since most of the work in client-side scripting has to do with the underlying document, DOM is an important part of everyday JavaScript coding.

It’s common across browsers to keep DOM and JavaScript implementations independent of each other. In Internet Explorer, for example, the JavaScript implementation is called JScript and lives in a library file called jscript.dll, while the DOM implementation lives in another library, mshtml.dll (internally called Trident). This separation ...