How to improve AJAX application performance?

Question

We all know that premature optimization is evil. Optimization almost always includes some compromise systems, more complex, difficult to understand and debug, etc.

Premature optimization means (I think) "optimization before you know what the problem is, or even the problem with it." In this case, you make one of the sacrifices and do not receive anything in return. Hence a bad idea.

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

Question

With that in mind, when creating AJAX applications, what tools can I use to identify speed bottlenecks? And what simple, simple improvements can be made?

A few initial thoughts

Some basic ideas that I know (feel free to expand them):

• Make fewer requests. For example, if you can combine several JS or CSS files into one, this one request.
• Send less data. Small files (miniature JS, crisp images, etc.) are useful.

Some things interest me:

• Google Chrome (which I use) runs JS very fast. My users can work with slower browsers. How can I minimize the impact of a slow browser on my application?

Answer 1

In making fewer requests :

• make sure your server sends caching headers for all files that can be cached.
• if you make requests based on user interactions, and it is likely that interactions will occur frequently and the previous result is invalid (for example, entering autocomplete), use a short timer before making a request; cancel the action if another interaction occurs.

In send less data :

• make sure your server is gzipping content , which can be gzipped.
• reload smaller chunks of HTML via AJAX. (Localize your changes.)
• Pay attention to the answer you return; as much as possible? Sometimes JSON is not the answer when sending very large responses that can be trivially parsed.

For working with slow browsers, especially with regard to programming web applications, everything you do to improve fast browsers helps to slow down. You could minimize the effects of crappy animations only for slower browsers, but that doesn't fall into the category of “simple improvement,” IMO. The correct answer is to determine what your performance requirements are, the minimum machine / browser configuration that must meet these requirements, and check your site .

When you come across too slow things, your site’s profile . Between Firebug, the developer tools for Chrome / Safari, and the developer tools for IE8 +, developers have some really great ways to detect JavaScript-based slowdowns. Identify really hard hits and rewrite or delete them.

Answer 2

Google Chrome (which I use) runs JS very fast. My users can work with slower browsers. How can I minimize the impact of a slow browser on my application?

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

For the record, we ended up clicking on Firefox 3 because IE6 made our app a waiting nightmare (lots of user interface elements). I came to the conclusion that if your users have older browsers, first create an application for them (i.e. Not too much Javascript, simpler HTML).

Answer 3

You mentioned combining and mining js and css files so that they are smaller, which in my opinion is really important, but I don’t think you should send too much of this through ajax requests.

I think it's probably best to have a large bootstrap where all css / js are loaded, and then just make ajax requests only on the data (probably json). If this is just a JSON error, it will be much faster.

Also on the client, you can make the code faster. JQuery is shown as one of the fastest libraries, so using this meaning is reasonable, but you need its profile.

Firebug, Firebug, Firebug.

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