开发学院网页设计JavaScript jQuery:一次失败的优化尝试 阅读

jQuery:一次失败的优化尝试

 2011-05-17 19:50:28 来源:本站整理   
核心提示: 我经常抱怨jQuery的DOM操作性能并不优秀,并且经常尝试用一些方法去进行优化,jQuery:一次失败的优化尝试,但是越是优化,越是沮丧地发现jQuery其实已经做得很好,3.当提交事务时,对被选择的元素进行一次遍历,从使用者的角度能够进行的优化实在有限(这并不意味着jQuery的性能是优秀的, 反之只能说它是

  我经常抱怨jQuery的DOM操作性能并不优秀,并且经常尝试用一些方法去进行优化,但是越是优化,越是沮丧地发现jQuery其实已经做得很好,从使用者的角度能够进行的优化实在有限(这并不意味着jQuery的性能是优秀的, 反之只能说它是一个相对封闭的库,无法从外部介入进行优化)。这篇文章就记录一次失败的优化经历。

  优化思想

  这一次优化的思想来自于数据库。在数据库优化的时候,我们常会说“将大量的操作放在一个事务中一起提交,能有效提高效率”。虽然对数据库不了解的我并不知道其原因,但是“事务”的思想却为我指明了方向(虽然是错的……)。

  因此我尝试将“事务”这一概念引入到jQuery中,通过“打开”和“提交”事务,从外部对jQuery进行一些优化,其最重要的在于减少each函数的循环次数。

  众所周知,jQuery的DOM操作,以get all, set first为标准,其中用于设置DOM属性/样式的操作,几乎都是对选择出来的元素的一次遍历,jQuery.access函数就是其中最核心的部分,其中用于循环的代码如下:

// Setting one attribute
if ( value !== undefined ) {
  
// Optionally, function values get executed if exec is true
  exec = !pass && exec && jQuery.isFunction(value);

  
for ( var i = 0; i < length; i++ ) {
    fn(
      elems[i],
      key,
      exec 
? value.call(elems[i], i, fn(elems[i], key)) : value,
      pass
    );
  }


  
return elems;
}

  比如jQuery.fn.css函数就是这样的:

jQuery.fn.css = function( name, value ) {
  
// Setting 'undefined' is a no-op
  if ( arguments.length === 2 && value === undefined ) {
    
return this;
  }

  
return jQuery.access( this, name, value, true, function( elem, name, value ) {
    
return value !== undefined ?
      jQuery.style( elem, name, value ) :
      jQuery.css( elem, name );
  });
};

  因此,下面这样的代码,假设被选择的div元素有5000个,则要循环访问10000个节点:

  而在我的想法中,在一个“事务”中,可以如数据库的操作一般,通过保存所有的操作,在“提交事务”的时候统一进行,将10000次节点访问,减少至5000次,相当于提升了“1倍”的性能。

简单实现

  “事务”式的jQuery操作中,提供2个函数:

  1.begin:打开一个“事务”,返回一个事务的对象。该对象拥有jQuery的所有函数,但是调用函数并不会立刻生效,只有在“提交事务”后才会生效。

  2.commit:提交一个“事务”,保证所有事先调用过的函数都生效,交返回原本的jQuery对象。

  实现起来也很方便:

  1.创建一个“事务对象”,复制jQuery.fn上所有函数到该对象中。

  2.当调用某个函数时,在预先准备好的“队列”中添加调用的函数名和相关参数。

  3.当提交事务时,对被选择的元素进行一次遍历,对遍历中的每个节点应用“队列”中的所有函数。

  简单地代码如下:

var slice = Array.prototype.slice;
jQuery.fn.begin 
= function() {
  var proxy 
= {
      _core: c,
      _queue: []
    }
,
    key,
    func;
  
//复制jQuery.fn上的函数
  for (key in jQuery.fn) {
    func 
= jQuery.fn[key];
    
if (typeof func == 'function'{
      
//这里会因为for循环产生key始终是最后一个循环值的问题
      
//因此必须使用一个闭包保证key的有效性(LIFT效应)
      (function(key) {
        proxy[key] 
= function() {
          
//将函数调用放到队列中
          this._queue.push([key, slice.call(arguments, 0)]);
          
return this;
        }
;
      }
)(key);
    }

  }

  
//避免commit函数也被拦截
  proxy.commit = jQuery.fn.commit;
  
return proxy;
}
;

jQuery.fn.commit 
= function() {
  var core 
= this._core,
    queue 
= this._queue;
  
//仅一个each循环
  core.each(function() {
    var i 
= 0,
      item,
      jq 
= jQuery(this);
    
//调用所有函数
    for (; item = queue[i]; i++{
      jq[item[
0]].apply(jq, item[1]);
    }

  }
);
  
return this.c;
}
;


1 2  下一页

Tags:jQuery 一次 失败

编辑录入:coldstar [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接