12

So i have a web application which is making around 14-15 AJAX calls to some APIs. The problem is the amount of time all the AJAX calls takes is nearly 3x than the time in which each individual API shows me response when I type its URL in the browser.

I am making all the AJAX calls instantly inside the DOM Ready event.

The thing is how can i speed up this process of making 15 AJAX calls together, getting the response as fast as possible and Manipulating the DOM accordingly.

Few Points which i have in my mind:

  1. All the AJAX calls should be ASYNC in nature. (Already doing it).
  2. Don't make all the AJAX calls at the same time. Induce some sort of timeout as making all the AJAX calls at the same time may block the bandwidth and slows down the turn around time of the process.
  3. Reducing the number of API calls by any means. (Already doing it).
  4. Manipulate the DOM as minimal as possible. (Already doing it).
  5. Setting cache:true in AJAX setup. I don't think that will really help, still i am doing it wherever i am sure content will update really slow.

Any suggestions will be valuable! Thanks.

The way i am making AJAX calls

$(document).ready(function(){

    loadSentimentModule();
    loadCountModule();
    loadEntitiesModule();  
    // Some more function calls.

});

function loadSentimentModule(){

   $.ajax({
          url:someurl,
          cache:true,
          dataType:"json",
          success: function(data){

              // Based on data manipulating DOM.
          }

}

// Same kind of function defintions for all the functions.
user988544
  • 556
  • 1
  • 11
  • 32
void
  • 36,090
  • 8
  • 62
  • 107
  • Show your way of doing multiple Ajax Requests.. – The Coder Nov 27 '15 at 09:23
  • @user1354678 typed in. Please check – void Nov 27 '15 at 09:26
  • `Reducing the number of API calls by any means` Sure that's where you should start. If you can handlle all data just by making one ajax request, then you're a winner :) – A. Wolff Nov 27 '15 at 09:27
  • If you have control over the API server, you could regroup all these calls into one or two calls. – Shanoor Nov 27 '15 at 09:28
  • @A.Wolff but can't do that. Say every API call has its own function. I can't club them. Will setting a timeout will work? – void Nov 27 '15 at 09:28
  • @ShanShan no i can't do that.. I dont have access to API server. – void Nov 27 '15 at 09:29
  • @void I was guessing you have control over the API methods. Are you sure there isn't one mehtod handling all this for you? You could still send one request to your own server which will handle all requests to the API for you, could be other solution but that's depends if there is some specific limitation regarding this API usage – A. Wolff Nov 27 '15 at 09:29
  • @A.Wolff On DOM ready i call a single function which call 14 other functions which have the AJAX calls. – void Nov 27 '15 at 09:31
  • @void No, i'm not talking about doing all the requests client side, but server side, if possible – A. Wolff Nov 27 '15 at 09:31
  • 1
    Do you have a server running? You could use the same idea. Your client issues one request (with an array of api_to_call/params?) to your server and your serve would do all the API calls and returns one huge array of data. It's lighter for the client and you'd have consistent performance and response time – Shanoor Nov 27 '15 at 09:32
  • @ShanShan Ya exactly what i was thinking, and by the way, would be easier to handle some cache logic server side – A. Wolff Nov 27 '15 at 09:33
  • @A.Wolff ShanShan just imagine 7 calls takes around 1s and rest 7 takes 10s, now if i club them either on client or ons server then the response time will increase like anything. Even the calls which takes a second to load will start taking more time. – void Nov 27 '15 at 09:35
  • Can you guess what must be causing the issue. I am loading the webpage on a really fast internet connection. – void Nov 27 '15 at 09:35
  • @void question is now quite interesting and now i am eager to watch that perfect answer :D. – Parth Trivedi Nov 27 '15 at 09:36
  • @void Imagine your server do all requests API to get data one time per hour, store it, cache it, whatever. Then your user**s** will request your server to get all these datas using only one request – A. Wolff Nov 27 '15 at 09:36
  • @A.Wolff so you are saying to store the response of all calls at some middle layer then i can fetch from there without any delay? – void Nov 27 '15 at 09:38
  • @void I said, if possible, minus to the maximum ajax call client side. And ya, if possible, use your server to proxify all these datas coming from third party API. That's what i would try to start with. BUT some APIs have some restrictions, without knowing which API you are talking about, I don't know. BTW, this suppose all these datas are public, not private regarding specific user – A. Wolff Nov 27 '15 at 09:39
  • The current browsers have neat ways to visualize all request, the duration, and dom events. Does that show anything to help you see whether * The requests are issued in parallel? * Any delays occur? – DThought Nov 27 '15 at 09:41
  • @A.Wolff No i can't do that, the query Params i am using to build the URL for API call is really dynamic and can have 1000s of possible perumtations and combinations. – void Nov 27 '15 at 09:44
  • @void So ya, unfortunately that's not possible :( – A. Wolff Nov 27 '15 at 09:46

2 Answers2

4

You may not issue the ajax call directly, but queue them and let a manager control the queue, see here: Queue ajax requests using jQuery.queue()

Community
  • 1
  • 1
Axel Amthor
  • 10,980
  • 1
  • 25
  • 44
  • Thanks. Didn't knew about it. But how does it makes things faster? – void Nov 27 '15 at 09:32
  • Doing things in a sequence on limited resources is always faster than in parallel. The limited resource over here is the bandwidth, as you already stated in your OP, and probably also the browser which needs to handle all the XML requests – Axel Amthor Nov 27 '15 at 09:35
  • Bandwidth i don't this is a issue. But say a call takes 10s, then if i will make 10 of these kind of calls in series then they will take atleast 100s (without caching enabled) and if i will 10 of these in parallel the time will be really less. What say? – void Nov 27 '15 at 09:37
  • @void Cannot you make only one relevant ajax call regarding some specif user interaction? Said e.g, user click button `loadSentimentModule`, call `loadSentimentModule()`, etc... ? Because if the issue comes from slow API and you cannot cache it in some way, i don't think there is really any solution to this issue – A. Wolff Nov 27 '15 at 09:52
  • @A.Wolff the thing is, When i am making an individual API call it takes 1s and when i make 10s of calls the call which was taking 1s starts taking 5s or so. I think there should be wayaround for this – void Nov 27 '15 at 09:55
  • @void A browser is limited regarding number of parallele requests done at same time. You could try calling a max of 2/3 requests in parallel maybe with some kind of logic. – A. Wolff Nov 27 '15 at 10:05
  • @void EDIT: seems the best way is still to let browser handling it, which seems logic afterall: http://stackoverflow.com/questions/10276784/jquery-limit-the-number-of-simultaneous-ajax-requests My idea was something like that (kind of pseudo code not tested): http://jsfiddle.net/8rp4yacp/1 – A. Wolff Nov 27 '15 at 10:11
  • 10+ AJAX requests in one go seems an architecture issue. 2-3 is fine I think, but 10 of those and each taking 10 seconds is a tremendous overhead and you should definitively consider combining those in to something larger – Axel Amthor Nov 27 '15 at 10:20
1

I recomend you to use the async.js module on client. May be it this what are you looking for.

Roman A.
  • 686
  • 5
  • 25