Tell me more ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.
up vote 1 down vote favorite

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?

share|improve this question
You mean Microsoft AJAX, not general AJAX, for example using jquery, right? – Thomas Aug 25 '11 at 16:23
1  
With those file sizes I think he means MS AJAX, not Ajax. :) – Mayo Aug 25 '11 at 20:49
I'm not sure about that, since user controls are being used, I'm guessing it's MS AJAX. – AtoMerZ Aug 26 '11 at 8:16

migrated from stackoverflow.com Aug 25 '11 at 20:27

5 Answers

up vote 3 down vote accepted

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 don't have enough rep to post comments on this stack yet, so I answered you question below.)

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.

share|improve this answer
First of all, thanks for thorough explanation. and then, the library I'm using puts java scripts directly within page, is there a way I can change that? Do you know any good control libraries out there? – AtoMerZ Aug 26 '11 at 8:13
@user35359 You registered with two different Google accounts here and on SO. If you create an account here with the same Google account as you used on Stack Overflow, your accounts will get associated and you should a) regain ownership of this answer; b) get a 100 reputation bonus that will allow you to leave comments on this site as well. – Anna Lear♦ Aug 26 '11 at 17:15
You are right. I accidentally used another account. Back to the original post, I was also going to say that I use MVC with Data Annotations for most validation (asp.net/mvc/tutorials/…) – Erik Philips Aug 26 '11 at 17:38
up vote 5 down vote

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)
share|improve this answer
up vote 1 down vote

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

share|improve this answer
The library I'm using puts java scripts directly within page, is there a way I can change that? Are there any control libraries that you may suggest? – AtoMerZ Aug 26 '11 at 8:14
up vote 0 down vote

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.

share|improve this answer
up vote 0 down vote

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.