Chapter 22. Lazy Evaluation of CommonJS Modules
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 ...
Get Web Performance Daybook Volume 2 now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.