Razor Optimizer is a JavaScript optimization tool for reducing code footprint and increasing runtime performnace. As a cross-browser web application itself, Razor Optimizer can be access either online as a service, or to be downloaded to run locally.

Razor Optimizer is based on a new approach for JavaScript optimization called "razor". While other optimization techniques such as JS minimization and concatenttion are based on static lexical analysis, Razor uses dynamic runtime profile information to achieve breakthrough results of 60% to 90% savings.

Why Razor Optimizer?

It is safe to say that Ajax is the technology foundation for Web 2.0. There are several hundred Ajax toolkits in the marketplace and new ones are still emerging.

While Ajax is getting real popular over the web, what people may not know is that Ajax(JavaScript) code is becoming the top 1 or 2 factors to consider in terms of footprint and performance impact in relation to the overall site (or application). 40% to 70% of the footprint of today's typical web 2.0 sites is JavaScript. For example, the front page of FaceBook contains 532KB JavaScript, 77% of the page footprint. Ajax toolkits have also become more sophisticated and bigger.

Developers are aware of the "code bloat" issue. Some developers choose to lower footprint by using shorter variable names and more compact code style. There are various optimization techniques available such as compression, JS minimization and file concatenation. All these are helpful, but none of them is helpful enough.

What can we do to bring Ajax to its full potential, and empower developers to use Ajax without worries?

Note that the problem is not new. Similar challenges exist for other programming languages. In early 2007, while studying Dojo performance, I blogged about "borrowing" approaches from other languages to optimize Ajax code(see Dojo Footprint and Ajax Performance Recommendation). At the time, I was hoping someone in the Dojo community would implement this. In late 2007 or early 2008, I remember seeing some research paper from Microsoft Research talking about something they call "Donoto" (unfortunately I couldn't find any information about Denoto on the web. If you know it, please post it in comments) "Doloto" (see http://research.microsoft.com/projects/doloto/. Thanks Stephen Lamm).

Razor Optimizer is based on a new approach coming from such kind of new thinking. Its goal is to free developers from the worries of code bloat, and free users from JavaScript introduced browser freezing.

In one sentence, Razor Optimizer (hopes to) lights up the web!

Razor Optimization Features

As an Ajax application itself, Razor Optimizer offers the following features:

• Runs in any browser
• Works with any Ajax application and Ajax toolkit
• A built-in profiler that records and visualizes application runtime profile data;
• Full automated, no programming required
• Detailed result reporting with comparison to other optimization techniques
• Light up your app with 50% to 90% footprint reduction
• Reduce the number of network round trips

How It Works

Razor Optimizer itself is a web based JavaScript application that runs in any browser. It contains a server component and a client component. Razor Optimizer client is an Ajax application based on Dojo 1.1. Razor Optimizer Server is a Java web application that runs inside any Java Servlet container. The following figure shows the architecture of Razor Optimizer.

Razor Optimizer Architecture

Razor Optimization Case Studies

In general, Razor is able to reduce application footprint by 60% to 80%. The followings present three different application examples. The three applications are:

1. American Airline’s web site (http://www.aa.com): this site uses PrototypeJS JavaScript library, one of the popular Ajax toolkits;
2. Razor Optimizer itself: Razor Optimizer is a Dojo 1.1 based JavaScript application;
3. jQueryUI demo (http://ui.jquery.com/functional_demos/): this is an application based on the popular jQuery library.

In comparison, Razor delivers significantly better results than other JavaScript optimization techniques. Using ShrinkSafe to optimize these three applications, the results would be 189KB, 568KB, and 86KB respectively (See Table 5). Razor further cuts down these numbers by half.

Razor is based on the following observations:

1. JavaScript functions are the basic low level building blocks of JavaScript code. Though typical JavaScript applications are made up of JavaScript files, functions are at a lower level than files because each JavaScript file is composed of JavaScript functions. While current JavaScript optimization techniques operates on a “file” level, performing optimization at the function level could yield much better result;
2. At any moment of time, the browser needs only one function because only one JavaScript function is executed at any moment of time.
3. Theoretically, the application would work fine if we download only one function at a time, right before the function is going to be called. Other functions are not needed. They can stay on the server side without being downloaded until they are going to be called. There is no need to download all the code up front, and there no need to download them at once;
4. If only one function needs to be downloaded and stay on the client side, we can achieve breakthrough savings in both download size as well as client memory/CPU footprint, resulting in significant performance improvements above any other techniques.

Wouldn't downloading one function at a time be very slow? Indeed. However, if you package a bunch of related functions together and if this one "package" is enough to fulfill one or more use scenarios, the user wouldn't notice any negative performance impact of incremental downloading.

So the key to this approach is to understand when/which function is called during different runtime scenarios. For example, if we know exactly which functions are called and when they are called during the initial application loading, we can trim all other code from the initial download without breaking the application. This would significantly save the initial download size and improve page loading performance.

The knowledge of “when/which function is executed” can be achieved by profiling the application. By recording the profile data, we can have accurate knowledge of the dynamic runtime behavior of the application beyond static lexical analysis for delivering breakthrough optimization results.

How to Use It

After you downloaded and installed Razor Optimizer (see instructions at GettingStartedWithRazor.html):

1. Start Razor server;
2. Open a browser instance and visit URL http://localhost:9090 to launch Optimizer UI;
3. Click "New Session" to start a new session. You may need to login. If you don't have an account, register one;
4. Enter the URL of your application, for example, http://ajaxian.com. This URL must be accessible from the Razor Server instance you are using;
5. Razor will attempt to open a new browser window to launch your application. Make sure that you configured your popup blocker to allow it to so do.
6. Your application will be running in its own browser window. Just click around your application (try to stay on the same page though, because multi-page scenarios have not been tested enough for Razor Optimizer).
7. At the meantime, Razor is recording profile data in the background;
8. Click "Close and View Results" to finish profiling.
9. Click "Optimize" to configure optimization. From here, you can configure file concatenation, ordering, function preservation, etc.
10. Finally, click "Optimize it now" to perform optimization. Razor server will process your code and generate a report in the end that shows you optimization results. You can download the results as a ZIP file;
11. Deploy the ZIP file to your application, test it and iterate a few times to achieve optimal outcome;

Razor Optimizer Screen Shot

Try It out

Razor Optimizer early beta is available for download. Try it out! Please comment below to let us know the problems you run into, complains or suggestions, etc.