Even Faster Web Sites

Chapter 7. Writing Efficient JavaScript

Nicholas C. Zakas

Today’s web applications are powered by a large amount of JavaScript code. Whereas early web sites used JavaScript to perform simple tasks, the language is now used to run the entire user interface in many places. The result can be thousands of lines of JavaScript code to execute every time a user interaction takes place. Performance, therefore, is not just about how long it takes for the page to load, but also about how it responds as it’s being used. The best way to ensure a fast, enjoyable user interface is to write JavaScript as efficiently as possible for all browsers.^[22]

This chapter covers some of the hidden performance issues in JavaScript and how to address them. Some changes concern small code structure issues while others may require revisiting your algorithm. The important thing to remember is that there is no silver bullet when trying to improve performance; no one thing will work in 100% of the cases. Only when various techniques are combined can you realize the largest performance improvement.

Managing Scope

When JavaScript code is being executed, an execution context is created. The execution context (also sometimes called the scope) defines the environment in which code is to be executed. A global execution context is created upon page load, and additional execution contexts are created as functions are executed, ultimately creating an execution context stack where the topmost context is the active one. ...