jQuery：一次失败的优化尝试

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倍”的性能。