Preface

_At present, the optimization of front-end development has a complete set of routines, including js, css optimization, HTML optimization, first-screen data request optimization, etc. This paper mainly discusses the front-end development.
Optimizing ideas for sending ajax requests.

Number of concurrent requests from browsers

_The number of network requests sent by browsers at the same time; when the number of requests exceeds the maximum concurrent number of browsers, the remaining requests can only be queued at the back and must wait for the front.
If the number of requests on the first screen of a page is too large, it will result in queuing of requests, prolonging the display time of the page and degrading the performance. Therefore, it is necessary to merge js, css and pictures.
Wait for files to reduce the number of concurrent requests. The number of concurrent requests for each browser is as follows:

Common ajax request problems

Often encountered such scenarios, because the background code is module decoupling (can not merge requests), sometimes a function needs to call the interface of different modules, which leads to
After sending a module's ajax request, we have to wait until the success callback before sending the second module's ajax request. This is what we often call nested ajax request, as follows:

$.ajax({    //Send the first request
   url:"http://localhost/project/moduleOne/oneRequest",
   type:"GET",
   success:function(result){
       if(result.success){
           $.ajax({  //Send a second request
                              url:"http://localhost/project/moduleTwo/anotherRequest",
              type:"GET",
              success:function(result){
                   $.ajax({})......  //Send the N th request
              },
              error:function(error){
              }
           });
       }
   },
   error:function(error){
        //handleError(error);
   }
})

Is this a familiar scene?
_This results in these requests being in a "synchronous" state, and subsequent requests must wait until the previous request has a return result before they can be sent, so that all subsequent requests are in place.
In the "blocking" state, every request sent by the browser has the process of domain name resolution, TCP handshake, server response, browser resolution and so on, which is time-consuming in the case of good network state.
It ranges from 300 ms to 600 ms. If the request is in a "synchronous" state, then the time-consuming of a complete functional request is:

Request time = number of requests* (300ms~600ms)
Since browsers have concurrent requests, this feature can be used for ajax concurrent requests.

Reliably "merge" ajax requests

_merge is double quotation marks, which means not to merge multiple requests into one request in the true sense, but to send multiple requests at the same time and then proceed with the result of multiple requests.
Merge; how can the returned results be reliably merged after sending the request?
We can use the front-end event system for reliable callbacks and merges, looking specifically at the code and comments:

var allData = {};  //Declare merging data
var requestNum = 3;//Declare the number of requests, which is used to record the number of requests completed. Each request completed is reduced by 1 until 0.


$(document).bind("allRequestComplate",function(){//Bind all requested events on document
    doSomeThingWithAllData.call(this,allData);//Perform business logic that requires merging data
    $(document).unbind("allRequestComplate");//Release of monitoring incidents
});

//Send the first request
$.ajax({
   url:"http://localhost/project/moduleOne/oneRequest",
   type:"GET",
   success:function(result){
      allData.moduleOneSuccessData = result; //Merge the requested data
   },
   error:function(error){
     allData.moduleOneError = error;//Errors are also merged
   },
   complate:function(){
      requestNum --;  //When this request is completed, the number of records is subtracted by 1
      if(requestNum == 0){ //If the request record is 0, a listening callback is triggered for all requests to be completed
           $(document).trigger("allRequestComplate")
      }
   }
});

//Send a second request
$.ajax({
   url:"http://localhost/project/moduleTwo/twoRequest",
   type:"GET",
   success:function(result){
      allData.moduleTwoSuccessData = result; //Merge the requested data
   },
   error:function(error){
     allData.moduleTwoError = error;
   },
   complate:function(){
      requestNum --;  //When this request is completed, the number of records is subtracted by 1
      if(requestNum == 0){ //If the request record is 0, a listening callback is triggered for all requests to be completed
           $(document).trigger("allRequestComplate")
      }
   }
});

//Send a third request
$.ajax({
   url:"http://localhost/project/moduleThree/threeRequest",
   type:"GET",
   success:function(result){
      allData.moduleThreeSuccessData = result; //Merge the requested data
   },
   error:function(error){
     allData.moduleThreeError = error;
   },
   complate:function(){
      requestNum --;  //When this request is completed, the number of records is subtracted by 1
      if(requestNum == 0){ //If the request record is 0, a listening callback is triggered for all requests to be completed
           $(document).trigger("allRequestComplate")
      }
   }
});

According to the example code above, we can get the conclusion.

Request time = the slowest request time
All requests will not be spent waiting, which greatly improves the efficiency of requests. What developers need to do is merge the requested data; they use event systems for callbacks.
Because js is a single thread, the event system is asynchronous and does not block the main thread. When the event is triggered, the main thread will wake up the event system for callback.