When thinking of how to structure and load a JavaScript application, it is important to remember certain important principles.
The costliest operations to do in JavaScript are:
- Requesting a resource through network I/O
- Display repainting, also known as redrawing, of the web page due to dynamic content changes such as making an element visible
- Reflowing, which can be caused by a window resize
- A DOM manipulation or dynamic change to the page’s styling
Obviously, the bottom line is that all these operations should be kept to a bare minimum in order to preserve good performance in general. When working on a script that is executing too slowly, these are the most important elements to look for with Google Chrome's Timeline tool, which can be accessed through Chrome’s Developer tools, as mentioned in Chapter 1, Faster Web – Getting Started, of this book.