Professional Website Performance: Optimizing the Front-End and Back-End

Chapter 6

JavaScript, the Document Object Model, and Ajax

WHAT’S IN THIS CHAPTER?

• Looking at the JavaScript engines used by the major browsers
• Understanding the impact that the Document Object Model has on performance
• Looking at performance considerations of the JavaScript language
• Understanding how browsers download and execute JavaScript
• Getting some tips for efficient Ajax programming

In the late 1990s, JavaScript suffered from a poor reputation among professional web developers. Too often it was used for flashy (but pointless) special effects and was a nightmare for cross-browser compatibility. Even visiting a particular vendor’s website using its own browser might have resulted in JavaScript error messages.

The situation has improved dramatically in the last decade, with browser-specific quirks having decreased, along with the need for ugly hacks to get around them. In a testament to how much things have changed, Ajax (which is built around JavaScript) is now such a big part of the modern web and works surprisingly smoothly most of the time. There’s also been a shift in how JavaScript is used, with less emphasis on gimmicks and more on usability. These days, the majority of big sites (and most Web 2.0 sites) use JavaScript to some degree, often without it being particularly apparent.

This chapter looks at the performance considerations for using JavaScript and the ways in which browsers download and execute it. JavaScript is closely related to the Document Object Model (DOM), ...