第三十二课：JSDeferred的性能提速

浏览数：19 / 时间：2015年06月09日

大家如果看了前面两课，就知道Deferred的静态方法next(next_default)是用setTimeout实现的(有浏览器最小时钟间隔)。但是实现这种异步操作，可以有很多种方法。JSDeferred中，针对老版本IE，以及标准浏览器都专门使用了一些方法来实现异步操作，提高异步操作的性能提速。

首先，我们先来看下针对老版本IE的提速。

Deferred.next_faster_way_readystatechange =

　　(location.protocol == "http:") && IE && //这里的location是window对象下(document.location这样使用也行，)的一个属性对象，它有很多属性，比如：href,protocol等，href属性值是当前页面的URL地址（等于document.URL），protocol属性值是当前页面URL的协议，一般是"htttp:"，"https:"等。如果是http请求，并且是老版本IE浏览器，就继续

　　　　function(fun){ //大家都知道&&的操作吧，前面如果都返回真，那么就返回后面这个。这里前面两个操作如果都返回真，那么这个&&操作会返回function。

　　　　　　var d = new Deferred();

　　　　　　var t = new Date().getTime();

　　　　　　if( t - arguments.callee._prev_timeout_called < 150){ //这里先判断当前的时间与函数的_prev_timeout_called 属性值相减小于150毫秒就进入if语句。第一次执行时，函数的_prev_timeout_called 属性值是undefined，因此不会进入if语句（而使用原始的setTimeout方法）。第二次调用这个方法时，它会检查第二次调用这个方法与上一次调用这个方法的时间间隔，如果事件间隔小于150毫秒，就用速度更快的方法实现异步操作。如果超过了150毫秒，就用setTimeout方法实现。

　　　　　　　　var cancel = false;

　　　　　　　　var script = document.createElement("script");

　　　　　　　　script.type = "text/javascript";

　　　　　　　　script.src = "data:text/javascript";

　　　　　　　　script.onreadystatechange = function(){ //加载一个不存在的资源，引发onerror，但是老版本IE不管是引发onerror还是onload都会引起onreadystatechange触发，因此就会执行这个函数。这里的异步操作时间非常短（在老版本IE下，这里的时间会短于setTimeout(function(){},0)的时间），但是足够让用户通过next实例方法绑定回调函数了。

　　　　　　　　　　if(!cancel){

　　　　　　　　　　　　d.canceller();

　　　　　　　　　　　　d.call();

　　　　　　　　　　}

　　　　　　　　};

　　　　　　　　d.canceller = function(){

　　　　　　　　　　if(!cancel){

　　　　　　　　　　　　cancel = true;

　　　　　　　　　　　　script.onreadystatechange = null;

　　　　　　　　　　　　document.body.removeChild(script);

　　　　　　　　　　}

　　　　　　　　};

　　　　　　　　document.body.appendChild(script); //因为这里需要把新建的script标签添加到页面中，所以我们的Deferred最好延迟到domReady或onload后执行

　　　　　　}

　　　　　　else{

　　　　　　　　arguments.callee._prev_timeout_called = t; //这里保存第一次执行此方法的时间，arguments.callee代表这个函数function(fun)。

　　　　　　　　var id = setTimeout(function(){

　　　　　　　　　　d.call();

　　　　　　　　}, 0 );

　　　　　　　　d.canceller = function(){

　　　　　　　　　　clearTimeout(id);

　　　　　　　　}

　　　　　　if(fun){

　　　　　　　　d.callback.ok = fun;

　　　　　　}

　　　　　　return d　　　　

　　　　};

这里我要说下，为什么要设置一个150毫秒的时间。大家都知道当我们在老版本IE下进行jsonp操作时，浏览器会进行请求，每新建一个script，并且设置它的src，并添加到页面上就会进行请求。如果不设置这个150毫秒的时间，那么如果每次异步操作都使用这种jsonp的方式，那么浏览器会同时进行N多个请求。而大家知道，IE6-7下，浏览器的并发请求是2-4个，IE8-9是6个。如果多余这个数量，那么请求就会被堵塞。导致使用这种方式的异步操作，时间花的更长，那这提速方法，就没有意义了。因此，我们在这里设置一个150毫秒的时间，在150毫秒内，它的jsonp的请求不可能会出现很多个。我们来举个例子：第一次异步操作，默认会使用setTimeout的方法，这时的时间是0（保存为_prev_timeout_called ），第二次异步操作，时间是40毫秒，小于150，所以使用jsonp方式，第三次异步操作，时间是80毫秒，小于150，使用jsonp方式，第四次异步操作，时间是120毫秒，小于150，使用jsonp方式。当第五次异步操作来临时，它的当前时间是160毫秒，这时160-_prev_timeout_called =160>150，使用setTimeout方式，并且保存_prev_timeout_called为160。因此，这里同时使用了三次jsonp方式，浏览器的并发请求是3个，没有超过浏览器的并发请求数，不会堵塞。

针对标准浏览器的加速如下：

Deferred.next_faster_way_image = !window.opera && document.addEventListener && //标准浏览器，并且不是opera浏览器，就继续。

　　function(fun){

　　　　var d = new Deferred();

　　　　var img = new Image();

　　　　var handler = function(){

　　　　　　d.canceller();

　　　　　　d.call();

　　　　};

　　　　img.addEventListener("load",handler,false); //加载一个不存在的图片，会触发error事件。之所有绑定了onload事件，以防图片存在。

　　　　img.addEventListener("error",handler,false);　　　　　　

　　　　d.canceller = function(){