前端优化思路1-------“合并”ajax请求

前言

  当前的前端开发的优化已经有一套完整的套路，包括js、css优化，HTML优化，首屏数据请求优化等，本文主要讨论前端发
送ajax请求的优化思路。

浏览器并发请求数

  浏览器在同一个时间发送的网络请求数；请求数超过了浏览器的最大并发数时，其余的请求只能在后面排队，必须等待前面
的请求完成后才能发送，如果一个页面的首屏请求数过大就会造成请求排队，页面展现时间延长、性能降低，所以需要合并js、css、图片
等文件以降低并发请求数。各个浏览器并发请求数对照表如下：

浏览器 HTTP/1.1 HTTP/1.0 IE8,9 6 6 Firefox 17 6 6 Firefox 3 6 6 Safari 3,4 4 4 Chrome 1,2 6 ? Chrome 3 4 4 Chrome 4+ 6 ? Opera 9.63,10.00alpha 4 4 iPhone 6 6 Android 6 6

常见ajax请求问题

  经常遇到这样的场景，由于后台代码是模块解耦（不能合并请求），有时候做一个功能需要调用不同模块的接口，这样导致
发送一个模块的ajax请求后必须等到success回调后再发送第二个模块ajax请求，这就是我们常说的嵌套ajax请求，如下：

$.ajax({    //发送第一个请求   url:"http://localhost/project/moduleOne/oneRequest",   type:"GET",   success:function(result){       if(result.success){           $.ajax({  //发送第二个请求                              url:"http://localhost/project/moduleTwo/anotherRequest",              type:"GET",              success:function(result){                   $.ajax({})......  //发送第N个请求              },              error:function(error){              }           });       }   },   error:function(error){        //handleError(error);   }})

这样的场景是不是很熟悉呢？
  这样导致这些请求是一个“同步”的状态，后面的请求必须等到前面的请求有返回结果才能发送，这样后面的所有请求就处
于“阻塞”状态；浏览器每发送一个请求，都有域名解析、TCP握手、服务器响应、浏览器解析等过程，在网络状态良好的情况下耗时大
概在300ms~600ms不等，如果请求是处于“同步”状态，那么一个完整的功能请求的耗时就是：

请求耗时 = 请求数 * (300ms~600ms)
既然浏览器有并发请求数，那么就可以利用这一特性进行ajax并发请求。

可靠地“合并”ajax请求

  合并打了双引号，意思并不是真正地意义上的将多个请求合并成一个请求，而是同时发送多个请求，再将多个请求的结果进行
合并；如何发送请求后将返回结果进行可靠地合并呢？
我们可以利用前端的事件系统进行可靠地回调和合并，具体看代码和注释：

var allData = {};  //声明合并数据var requestNum = 3;//声明请求数,用于记录请求完成计数，每完成一个请求则减1，直到为0；$(document).bind("allRequestComplate",function(){//在document上绑定所有请求完毕的事件    doSomeThingWithAllData.call(this,allData);//执行需要合并数据的业务逻辑    $(document).unbind("allRequestComplate");//释放监听事件});//发送第一个请求$.ajax({   url:"http://localhost/project/moduleOne/oneRequest",   type:"GET",   success:function(result){      allData.moduleOneSuccessData = result; //将此请求的数据进行合并   },   error:function(error){     allData.moduleOneError = error;//错误也合并   },   complate:function(){      requestNum --;  //此请求完成后，记录数减1      if(requestNum == 0){ //如果请求记录为0，则触发所有请求完成的监听回调           $(document).trigger("allRequestComplate")      }   }});//发送第二个请求$.ajax({   url:"http://localhost/project/moduleTwo/twoRequest",   type:"GET",   success:function(result){      allData.moduleTwoSuccessData = result; //将此请求的数据进行合并   },   error:function(error){     allData.moduleTwoError = error;   },   complate:function(){      requestNum --;  //此请求完成后，记录数减1      if(requestNum == 0){ //如果请求记录为0，则触发所有请求完成的监听回调           $(document).trigger("allRequestComplate")      }   }});//发送第三个请求$.ajax({   url:"http://localhost/project/moduleThree/threeRequest",   type:"GET",   success:function(result){      allData.moduleThreeSuccessData = result; //将此请求的数据进行合并   },   error:function(error){     allData.moduleThreeError = error;   },   complate:function(){      requestNum --;  //此请求完成后，记录数减1      if(requestNum == 0){ //如果请求记录为0，则触发所有请求完成的监听回调           $(document).trigger("allRequestComplate")      }   }});

根据上面的示例代码，可以得出

请求耗时 = 最慢的那个请求时间
所有请求不会耗在等待上面，这样大大提高了请求效率。开发者需要做的事情只是把请求数据进行合并而已；其中使用事件系统进行回调，
是由于js是单线程，事件系统是异步的，不会阻塞主线程，当事件被触发时，主线程才会唤醒事件系统进行回调。