ASP vs javascript vs jQuery vs User Controls vs AJAX

Question

Increasingly when developing sites I find myself utilising more client side technologies such as Javascript, jQuery and AJAX.

For three different pages I measured the size of the HTML sent to the browser (excluding images and CSS).

What I found was:

• A page that has normal ASP.NET controls + a little bit of jQuery: approx. size = 30kb

• A page using some user controls that have AJAX and client side support: approx size = 50kb

• A page that uses more complex user controls from a library with heavy client side support: approx. size = 110kb

As you can see the size of data transferred seems to increase as client side support and AJAX features are added.

This adds to the bandwidth requirements of the site and presumably the servers I/O load which may reduce the number of concurrent users that can be served.

Should I worry about balancing rich client side features and interactivity with server's load and bandwidth use?

What are the priorities, if any?

Answer 1

Are we supposed to use these features (javascript, jQuery, AJAX, etc..)?

Depends on your requirements for building an application. Use the tools that provide acceptable solutions to your needs.

If so why does it make such big difference in the size of pages?

I'm not quite sure if you are looking at just the page or the entire request. Most of the JavaScript I would assume is in separate files that can be cached by the browser. So the first request might be big, but subsequent requests would be much smaller. (Also to take more load off your server, look into using a CDN)

Is it the way I have used them or is it a common problem (I've heard so).?

Since you haven't provided us any code or examples, it could be the way you've used them. Or it could be the controls you've attempted to use. I've noticed that Telerik controls seem to be quite bloated, but that is my own opinion.

How do I balance page interactivity and server's load?

These are mostly independent from each other. It is possible to create a very interactive page that can be either more or less load on the server (load I assume is CPU/Disk time). In my opinion, AJAX for the most part simply reduces the number of times complete layouts have to be sent by the server to the client which; is less bandwidth and slightly less load on a server due to the lack "rendering" html.

What are priorities?

Highly depends on your application requirements. It sounds like you've jumped off a diving board into a big pool of web based opportunities, but don't know where to swim to.

I am mostly using JQuery, which has a lot of very good useful features:

• DOM element selections
• DOM traversal and modification (including support for CSS 1-3)
• Events CSS
• manipulation Effects and animations
• Ajax
• Extensibility through plug-ins
• Utilities - such as browser
• version and the each function.
• Cross-browser support

Granted I have to program features myself.

Answer 2

You can't expect to get something for nothing. These libraries do require more initial bandwidth for the user, but once it's cached, browsers are smart enough not to keep refetching where they don't need to.

Content Delivery Networks (CDNs) offer the ability to share cached versions of these libraries across multiple site requests, so using a CDN to fetch jQuery for one site, means the browser won't bother fetching it again on another site that uses the same CDN.

To analyse your specific issues with page sizes, you'll have to analyse where the bandwidth is being spent. Grab something like Firebug (for Firefox), or any other developer tools (all the major browsers have them), and they provide you an interface to determine the appropriate costing for each resource (image, css, javascript, etc). From that, determine where you can make improvements:

• Merging static resources (CSS, Javascript)
• Image sprites (combining images into single images and using CSS to place them)
• HTTP compression (gzip, deflate)

Answer 3

What I think you havent thought about is if you reference all of the js and controls files in your header, they will only be downloaded the first time, same as css. That way all of the rest of the pages will load only 30kb. do not put the actual control and js code in the html files.. just a reference that can run from the cache

Answer 4

The way that AJAX saves server resources is that users (ideally) make a full-page request exactly once. From there if the user starts browsing other web-pages, requests should typically be much smaller, because you're not reloading everything on the page, only the different content.

Assume the following made-up data (you'll have to do some testing for actual values)

Values    | AJAX  |  Normal
============================
First     | 120   |   30
Page Load |       |
----------|-----------------
Subsequent|  10   |   30
Page Load |       |

  | AJAX | Normal
==================
1 |  120 | 30
2 |  130 | 60
3 |  140 | 90
4 |  150 | 120
5 |  160 | 150
6 |  170 | 180
7 |  180 | 210
8 |  190 | 240
9 |  200 | 270
10|  210 | 300

You'll still have to take into account caching, which is likely to reduce subsequent calls with AJAX and normal requests, but the general idea is that for repeat users over longer sessions, the total data usage will be significantly less than with a normal page (why keep reloading the sidebar when it hasn't changed?)

Additionally, JavaScript allows for significant code minification that just doesn't exist with pure HTML+CSS beyond stripping white-space.

Answer 5

Make sure you enable gzip on the server and that the client uses it. This will reduce bandwidth.