Structuring and loading a JavaScript application

When thinking of how to structure and load a JavaScript application, it is important to remember certain important principles.

Minimizing costly operations

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.

Cleaning up, minifying, and compressing resources

Of course, excluding unused...