High Performance JavaScript

Chapter 6. Responsive Interfaces

There’s nothing more frustrating than clicking something on a web page and having nothing happen. This problem goes back to the origin of transactional web applications and resulted in the now-ubiquitous “please click only once” message that accompanies most form submissions. A user’s natural inclination is to repeat any action that doesn’t result in an obvious change, and so ensuring responsiveness in web applications is an important performance concern.

Chapter 1 introduced the browser UI thread concept. As a recap, most browsers have a single process that is shared between JavaScript execution and user interface updates. Only one of these operations can be performed at a time, meaning that the user interface cannot respond to input while JavaScript code is executed and vice versa. The user interface effectively becomes “locked” when JavaScript is executing; managing how long your JavaScript takes to execute is important to the perceived performance of a web application.

The Browser UI Thread

The process shared by JavaScript and user interface updates is frequently referred to as the browser UI thread (though the term “thread” is not necessarily accurate for all browsers). The UI thread works on a simple queuing system where tasks are kept until the process is idle. Once idle, the next task in the queue is retrieved and executed. These tasks are either JavaScript code to execute or UI updates to perform, which include redraws and reflows (discussed ...