Web Performance Daybook Volume 2

Chapter 22. Lazy Evaluation of CommonJS Modules

Tobie Langel

About two years ago, the mobile Gmail team posted an article focused on reducing the startup latency (http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.html) of their HTML5 application. It described a technique which enabled bypassing parsing and evaluation of JavaScript until it was needed by placing it inside comments. Charles Jolley (http://www.okito.net/) of SproutCore (http://sproutcore.com/) fame was quick to jump on the idea. He experimented with it (http://blog.sproutcore.com/faster-loading-through-eval/) and found that similar performance gains could be achieved by putting the code inside of a string rather then commenting it. Then, despite promises (http://www.okito.net/post/8409610016/on-sproutcore-2-0) of building it into SproutCore, this technique pretty much fell into oblivion. That’s a shame because it’s an interesting alternative to lazy loading that suits CommonJS modules really well.

Close Encounters of the Text/JavaScript Type

To understand how this technique works, let’s look at what happens when the browser’s parser encounters a script element with a valid src attribute. First, a request is sent to the server. Hopefully the server responds and the browser proceeds to download (and cache) the requested file. Once these steps are completed, the file still needs to be parsed and evaluated (Figure 22-1).

Figure 22-1. Uncached JavaScript resource fetching, parsing, and evaluation ...