zoukankan      html  css  js  c++  java
  • 第三十二课:JSDeferred的性能提速

    大家如果看了前面两课,就知道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(){

          img.removeEventListener("load",handler,false);

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

        };

        img.src = "data:image/png," + Math.random();   //这里之所以加上随机数,是因为图片会缓存,以防图片存在的情况下被缓存了,这样就不会发请求,也就不会有异步效果了。

        if(fun){

          d.callback.ok = fun;

        }

        return d;

      }; 

    根据JSDeferred官方的数据,用上这两个后,比原来的setTimeout异步方式快了700%以上。

    JSDeferred不单单是运行于网页上,它还能在浏览器的插件环境以及node.js上运行。node.js已经支持快的惊人的最新异步API:setImmediate方法了。

    当然,这些提速的方式因为都属于异步操作,因此都会有延迟效果,最快的方式就是不使用异步操作,jQuery Deferred就是使用精妙数组结构实现的,下一课将详细讲解它。

    加油!

  • 相关阅读:
    window.open跨页面传输
    history对象
    类vr特效的360度全景
    移动端图片滑动
    图片拼图
    20180808 考试记录
    [jzoj 5770]【2018提高组模拟A组8.6】可爱精灵宝贝 (区间dp)
    20180806 考试记录
    [luogu2319 HNOI2006] 超级英雄 (匈牙利算法)
    [luogu2679] 子串 (多维dp)
  • 原文地址:https://www.cnblogs.com/chaojidan/p/4186385.html
Copyright © 2011-2022 走看看