AJAX - The Complete Reference

PART II

Chapter 6: Networking Considerations 269

improve script execution times because the objects are copied higher up into JavaScript’s

scope chain. This technique has been used for years by developers who write JavaScript

games, and while it does improve both download and execution performance, it does so at

the expense of local browser memory usage.

Practical Effects

After seeing a whole host of techniques for shaving bytes off your delivered data, it is clear

that no single one of them seems terribly impressive in terms of the savings that they

provide. However, taken together, these methods can produce some significant results. For

example, Table 6-2 shows the sizes of a number of popular Ajax libraries plus our own in

raw, gzipped, content compressed, and combined form.

The content compression values in Table 6-2 are representative of what can be done with

commonly available tools. It is quite likely you will be able to squeeze out more bytes

depending on the tool settings used or if you are willing to hand optimize. The point here is

not to declare a particular tool or library the size winner but to show that savings can be

significant.

There’s Even More

There are many other techniques that can be used to reduce our content size, for example

dependency renaming. For delivery why use descriptive names for scripts, images, and

style sheets? Descriptive names in delivered code and markup can be long and are only of

interest to those wishing to reverse-engineer the site, so instead of:

<link rel="stylesheet" href="../styles/globalstyle.css" media="screen" />

<script type="text/javascript" src="scripts/superduperlibrary.js"></script>

<img src="images/ourlogo.gif" />

use:

<link rel="stylesheet" href="../styles/gs.css" media="screen" />

<script type="text/javascript" src="scripts/sl.js"></script>

<img src="images/o.gif" />

It might be even better to employ path reduction and create special root level directories

with very short names to store your dependencies:

<link rel="stylesheet" href="/c/gs.css" media="screen" />

<script type="text/javascript" src="/s/sl.js"></script>

<img src="/i/o.gif" />

TABLE 6-2 Sample Compression Values for JavaScript Libraries

Library Raw Gzip

Content

Optimized

Gzip + Content

Optimized

Max %

Savings

YUI – connection

Lib

28124 7379 9139 2961 89%

Prototype 96046 22015 65888 19552 80%

AjaxTCR Lib 146288 35930 56761 15291 90%