web pages with a lot of AJAX calls performance

Question

My project is a web mobile app that uses a lot of AJAX calls to the server, to refresh and retrieve data, I'm using php scripts to get data from the server.

I noticed, and also users told me, that sometimes the application performance is very slow. I believe that it's because of the AJAX calls, I checked my server and it doesn't has any performance problems when this problem occurs.

It is very strange, because when the problem occurs, the application send AJAX request to the server and get stuck until the timeout error appear, and when sending it again, it performs perfectly and give an answer in less than a second.

I checked similar issues, and i saw that using php sessions can create file lock and every request needs to wait until the previous ends. This issue cancel the AJAX asynchronous process. I am not using sessions but maybe my case is the same and the php scripts perform file lock or other type of locking and cancel the asynchronous.

Anyone has any idea how can I solve this?

Thanks.

Answer 1

While creating an application with a lot of AJAX requests, please keep the following in mind:

1. Reduce the Number of Ajax Requests

For starters, the best performance can be had by not making an Ajax request at all. This may seem both obvious and pointless: dropping Ajax isn’t really better Ajax, is it? But there are ways you can have your Ajax cake and eat it too. The first goal isn’t to cut out all Ajax requests, but the unnecessary ones. Or, if you want to be aggressive, also cut the less necessary requests. If your script, for example, performs the same Ajax request every minute, see if every two minutes isn’t a reasonable alternative. If so, then you’ve just halved the number of requests!

2. Select the Event on which AJAX request triggers wisely

You need to be careful where and when your AJAX request is made. The re-ordering of events and user actions to decrease the AJAX request with the increase in user experience, data management & flow should be closely analysed. For example, say you have a page in which the user can dynamically reorder a list of items. Offhand, you might be tempted to perform an Ajax request with each change in the order (presumably, the request would save the new order in the database). However, it’s likely the user would make multiple changes, resulting in multiple requests, and the fact is that it’s only the final order that really matters. One simple solution would be to add a submit button for the user to click and have the single Ajax request performed at that time.

3. Use GET Requests When Appropriate

Speaking of GET request types, you should also know that GET requests tend to perform better than POST. To be fair, the decision as to which you use should mostly be based upon the particulars of the request:

• GET requests are intended to retrieve information from the server.
• POST requests are intended to cause a server reaction, such as the updating of a database record, the sending of an email, and so forth.

But GET requests are normally faster, so err on the side of overusing GET if there’s any question as to which is most appropriate.

4. Reduce the Amount of Data Transmitted

One benefit that Ajax brings to web pages is that they can minimize the amount of data that needs to be transferred back and forth between the client and the server. This is simply because the complete web page—HTML, CSS, JavaScript, and various media—does not need to be downloaded by the browser, and redrawn, just to confirm that a username is available or to fetch the latest stock quote. But the Ajax request itself can be written to send more or less data.

For starters, you can limit what actual data gets transmitted back to JavaScript by your server-side resource. Next, you should choose the best data format:

• Plain text
• JavaScript Object Notation (JSON)
• eXtensible Markup Language (XML)

As with GET versus POST, there are other factors in selecting a data format, but do be aware that plain text will normally transmit the fewest bits of data, whereas XML can be verbose. Of course, JSON and XML are able to represent more complex data than plain text ever could, but don’t dismiss plain text as an option.

On a more advanced level, you can compress the data on the server before returning it. Modern browsers handle GZipped data well, although there is a trade-off in the extra processing required to GZip and unzip the data on either end. Transmitting GZipped data is a bit more advanced a concept, but one that should be on your radar.

5. Use Caching for recurring data

Take advantage of browser caching. This only applies when Ajax is being used to request information, not when it’s being used to send data to the server.

The gist of caching is this: The browser will store local copies of site resources so that it won’t need to re-download them on subsequent requests (within a certain time frame). The browser’s attempts to cache resources also apply to Ajax requests made via the GET method (which can cause headaches during debugging). Thus, if your GET requests are cachable, you’ll improve the performance of the Ajax.

But be very cautious while using caching and take care of the threshold of available resources.

Also please read the following:

• Making Ajax Elegantly Fast
• Faster AJAX Web Services through multiple subdomain calls (The information given in this link is .NET based but the same concept can be used)
• Are WebSockets faster than AJAX? ...with latency in mind? (Not related to the question. Just for consideration as another option wherever possible in your application)

I know this was very basic and generalized information but hope this helps in some way...