278 Part II: Developing an Ajax Library^
on high speed pages if lots of requests are made. Plain and simple, if you have a high-speed line,
it does not pay performance-wise to have lots of round trips to the server even if they happen quickly.
To demonstrate this simple fact, a simple tool to generate various types of Web pages
(http://ajaxref.com/ch6/pagegenerator/createpages.html) can be used. With this tool you
can generate pages of various combinations of HTML, JavaScript, CSS, and image files. All
the content is generated randomly to show you that there is no trickery going on.
As an example, on the medium setting you might generate a page that has a few thousand
lines of JavaScript spread across five files, a few CSS files and 25 images. Interestingly, this
kind of breakdown isn’t really that rare in today’s page. For comparison purposes, using the
same exact content, a bundled version of that content is generated. Rather than breaking the
JavaScript into individual files, it is placed inline within the HTML file as is the CSS. Also all
the images are condensed into one giant image and then CSS properties are used to show the
particular part of the large image required. What that means is that a single large image is
generated with all the particular individual images found within like so:Then a CSS property is used to show only the particular portion of the image of interest,
like so:<img src="http://ajaxref.com/ch6/pixel.gif"
style="background:url('image_1883105273.png') -0px 0px no-repeat;
height: 25px; width: 104px;" />The savings between the bundled and distributed versions of the page is mathematically
quite dramatic, as shown in Figure 6-24.
If you think in terms of percentage difference, there is significant savings with bundling,
no matter how you slice it. This example really seems to prove the point about requests
influencing speed, so you might really want to work on avoiding being chatty for the
highest rate of speed.
Given the previous experiment, the impact of making many Ajax requests for some data
versus a few would seem to be quite important. For example, imagine the simple idea of
taking a set amount of data and splitting it into more and more pieces and watching the
overall time going up. A Payload Explorer (http://ajaxref.com/ch6/payloadpartition.html)
example is provided for you to experiment with just this idea. Unfortunately, as shown in
Figure 6-25, you won’t see the dramatic differences between few requests and many
requests seen in the bundling example. What does that tell you? That speed really is not just
bytes and requests, but time, and there is more to that than simple math. Your bandwidth
mileage can truly vary.