How can I improve the performance of an AJAX application?

We all know that premature optimization is evil. Optimization almost always involves some kind of tradeoff - making systems more complex, harder to understand and debug, etc.

Premature optimization means (I think) "optimizing before you know what the problem is - or even whether there is a problem." In this case, you're making one of the sacrifices mentioned and getting nothing in return. Hence, a bad idea.

On the other hand, I really think Jeff Atwood's 2006 post, "Speed Still Matters," is eternally applicable. User satisfaction has a lot to do with speed.

The Question

With that in mind, when building AJAX applications, what tools can be used to identify speed bottlenecks? And what are some common, simple improvements that can be made?

A few initial thoughts

Some basic ideas I know (feel free to expand on these):

• Make fewer requests. For example, if you can bundle multiple JS or CSS files into one, th开发者_如何学Pythonat's one request.
• Send less data. Smaller filesizes (minified JS, crunched images, etc) are helpful.

Some things I'm curious about:

• Google Chrome (which I use) runs JS very quickly. My users may be running slower browsers. How can I minimize the impact of a slow browser on my app?

In the make fewer requests vein:

• ensure that your server is sending caching headers for all files that can be cached.
• if you make requests based on user interactions, and there's a chance that the interactions will occur frequently and invalidate the previous result (e.g. autocomplete typing), use a short timer before making the request; cancel the action if another interaction occurs.

In the send less data vein:

• ensure that your server is gzipping content that can be gzipped.
• reload smaller chunks of HTML via AJAX. (Localize your changes.)
• pay attention to the response you're returning; is it as small as it can be? Sometimes JSON is not the answer when sending very large responses that can be trivially parsed.

For handling slow browsers, specifically with regards to web application programming, everything you do to improve fast browsers helps slower ones. You could minimize cheesy animation effects just for the slower browsers, but that doesn't fall into the category of a "simple improvement", IMO. The right answer is to identify what your performance requirements are, the minimum machine/browser configuration that must meet those requirements, and test your site.

When you do encounter things that are too slow, profile your site. Between Firebug, the developer tools for Chrome/Safari, and the developer tools for IE8+, developers have some truly excellent ways to identify JavaScript-based slowdowns. Identify the really heavy hits and either rewrite or remove them.

Google Chrome (which I use) runs JS very quickly. My users may be running slower browsers. How can I minimize the impact of a slow browser on my app?

We had to make an application running on IE6 and that was a nightmare. Try to keep in mind the general javascript optimisation tricks that you can grab on the net. Then when your application is ready, grab the slow browser and try to see where it is inacceptably slow. Then back to Firebug and optimise the bottlenecks.

For the record, we ended up pushing Firefox 3 because IE6 made our application a waiting nightmare (lots of UI elements). My conclusion was that if your users have old browsers, design your application for them first (i.e. not too much Javascript, more basic HTML).

You mentioned bundling and minifying js and css files so they are smaller which I think is really important but I don't think you should be sending too much of that through ajax requests.

I think it's probably better to have a larger initial load where all the css/js is downloaded and then just make the ajax requests about data only (json probably). If it's just a blip of JSON it will be much faster.

Also on the client you can possibly make you're code faster. Jquery is shown to be one of the fastest libraries so using that where it makes sense is smart but you need to profile it.

Firebug, Firebug, Firebug.

On the server side, Node.js (a reactor server) is impressively fast and worth looking into.