I had some time to have a look at the showcases of sites powered by ASP.NET AJAX. There are a couple of new web sites available that I didn't looked at. I started my Internet Explorer, Fiddler and Ethereal and captured everything I got. Here are my results:

Quotiki

Quotiki is a social tagging and rating site for famous quotations. It uses the "wisdom of the crowd" model to push the best content to the top of the search engine results. It allows users to quickly find inspiring, interesting, and funny quotes based on popularity and through a robust tagging framework.

The first request to this page did about 46 requests (Google ad not included):

Bytes Sent: 19,839
Bytes Received: 184,722    (uncompressed: 386,952)

Pressing F5 to reload the page again I got only 44 requests:

Bytes Sent: 22,545
Bytes Received: 56,348

Why is the count of bytes my web browser sent to the web server higher then the initial requests? The reason is that every static file has added two http headers to see if the file has been changed or not:

If-Modified-Since: Wed, 22 Nov 2006
If-None-Match: "xyz"

Ok, now let's try our first search. I tried to enter only one character "s" and had a look at Fiddler to see what will be done in the background. I noticed that there was no real postback, that was what I expected. But what has been transfered between client and server?

I captured following bytes while running my first search:

Bytes Sent: 8,535
Bytes Received: 32,626

Having a look on the received data I noticed that nearly the complete page has been updated. Only navigation and right side boxes are static.

Next I had a look at the start page (default.aspx) itself. When only retreiving the default.aspx I have following traffic:

Bytes Sent: 435
Bytes Received: 46,989

Here are my results:

• Quotiki saves 14,000 bytes when using AJAX instead of a common postback
• the used AJAX framework itself is about 263,766 bytes (uncompressed)
  263,766 / 14,000 bytes ~ 18 search requests to save the size of the framework
• for any AJAX request it uploads 8,500 bytes to the web server (have in mind that upload speed is slower for many ADSL users)
• and I'm afraid of the length of used IDs in the list: ctl00_LeftSide_Search1_resultsRepeater_ctl00_addMyQuoteButton

I would love to see how the performance whould be change if I use a simple XMLHttpRequest with http GET for the default.aspx adding an argument for the search value. This wouldn't need the 8,500 extra upload bytes and the response bytes should be similar. Is the only reason to use AJAX frameworks to save development time? Or do we want to write faster web pages?

Smart Scoreboard

SmartScoreboard is a sports portal dedicated to delivering personalized customizable scoreboards for your favorite teams in real time as well as the most up-to-date sports news for your team from multiple sources. You can also comment on the articles and share your thoughts with other community members. As of today, we support Scoreboards for the MLB, NFL and College Football leagues and have plans to expand in the very near future.

Again I have done the same test with clearing my Internet Explorer cache and captured all the traffic to see what is done in background. It is the same as above, but maybe it is a little bit more strange.

What do I need to move panels around?

Ok, first I need a unique ID for every panel. In the background I have a matrix where I can put the panel to. At the SmartScoreboard web site I have a very simple matrix with only three columns. For each column we need a sequence, too.

The simpliest way to save this would be something like this URL:

http://mywebserver/saveconfiguration.aspx?id=Panel1&matrixcol=2&sequence=5

When I move one panel to another placeholder I capture following traffic:

Bytes Sent: 5,086
Bytes Received: 35,893

Wow, I didn't expect this. In my example above (the URL) it would expect something like 400 bytes sent and maybe 400 bytes received.

Update: this problem is not directly an ASP.NET AJAX problem, but using this framework does tempt to not look more in detail. Try to use the great Visual Studio .NET (Express) and ASP.NET AJAX to drag'n drop a table from server explorer in an AJAX UpdatePanel. Enable all the grid properties like editing, deleting and selecting, allow sorting. Then start this web page (you didn't write any line of source code!!!) and try to use it. Now, use SQL Profiler and Fiddler to see what is done in the background!

No Comments