记一次失败的jQuery优化尝试

开发 前端
这篇文章就记录一次失败的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; 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.

比如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, truefunction( elem, name, value ) {  
return value !== undefined ?  
jQuery.style( elem, name, value ) :  
jQuery.css( elem, name );  
});  
}; 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.

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

jQuery('div').css('height', 300).css('width', 200); 
  • 1.

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

简单实现

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

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

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

实现起来也很方便:

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

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

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

简单地代码如下:

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.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.

测试环境

测试使用以下条件:

 ◆ 5000个div放在一个容器(div id="container"/div)中。

 ◆使用$(#containerdiv)选择这5000个div。

 ◆每个div要求设置一个随机背景色(randomColor函数),和800px以下的随机宽度(randomWidth函数)。

参加测试的调用方法有3个:

 ◆正常使用法:

$('#containerdiv')  
    .css('background-color', randomColor)  
    .css('width', randomWidth); 
  • 1.
  • 2.
  • 3.

 ◆单次循环法:

$('#containerdiv').each(function() {  
    $(this).css('background-color', randomColor).css('width', randomWidth);  
}); 
  • 1.
  • 2.
  • 3.

 ◆事务法:

$('#containerdiv')  
    .begin()  
        .css('background-color', randomColor)  
        .css('width', randomWidth)  
    .commit(); 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

 ◆对象赋值法:

$('#containerdiv').css({  
    'background-color': randomColor,  
    'width': randomWidth  
}); 
  • 1.
  • 2.
  • 3.
  • 4.

测试浏览器选择Chrome 8系列(用IE测就直接挂了)。

悲伤的结果

原本的预测结果是,单次循环法的效率远高于正常使用法,同时事务法虽然比单次循环法慢一些,但应该比正常使用法更快,而对象赋值法其实是jQuery内部支持的单次循环法,效率应该是***的。

然而遗憾的是,结果如下:

正常使用法 单次循环法 事务法 对象赋值法
18435ms 18233ms 18918ms 17748ms

从结果上看,事务法成了最慢的一种方法。同时单次循环与正常使用并没有明显的优势,甚至依赖jQuery内部实现的对象赋值法也没有拉开很大的差距。

由于5000个元素的操作已经是非常庞大的循环,如此庞大的循环也没能拉开性能的差距,平时最常用的10个左右的元素操作更不可能有明显的优势,甚至还可能将劣势扩大化。

究其原因,由于本身单次循环法就没有明显的性能提升,因此依赖于单次循环,并是在单次循环之上进行外部构建的事务法,自然是在单次循环的基础上还需要额外增加创建事务对象、保存函数队列、遍历函数队列等开销,结果败给正常使用法也在情理之中。

至此,也算是可以宣布模仿事务的优化之道的失败。但是对这个结果却还能进一步地分析。

性能在哪里

首先,从代码的使用上来分析,将正常使用法和测试中最快的对象赋值法进行比较,可以说两者的差距仅在于循环的元素个数的不同(这里抛开了jQuery的内部问题,事实上jQuery.access的糟糕实现也确实有拖对象赋值法后腿之嫌,好在并不严重),正常使用法是10000个元素,对象赋值法是5000个元素。因此可以简单地认为,18435 17748 = 687ms是循环5000个元素的耗时,这占到整个执行过程的3.5%左右,并不是整个执行过程的主干,其实真的没有优化的必要。

那么另外96.5%的开销去了哪里呢?谨记Doglas的一句话,事实上Javascript并不慢,慢的是DOM的操作。其实剩下96.5%的开销中,除去函数调用等基本的消耗,至少有95%的时间是用在了DOM元素的样式被改变后的重新渲染之上。

发现了这个事实之后,其实也就有了更正确的优化方向,也是前端性能中的基本原则之一:在修改大量子元素时,先将根父DOM节点移出DOM树。因此如果使用以下的代码再进行测试:

//没有重用$('#container')已经很糟糕了  
$('#container').detach().find('div')  
    .css('background-color', randomColor)  
    .css('width', randomWidth);  
$('#container').appendTo(document.body); 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

测试结果始终停留在900ms左右,与前面的数据完全不在一个数量级之上,真正的优化成功。

教训和总结

 ◆千万要找到正确的性能瓶颈再进行优化,盲目的猜测只会导致走上错误而偏激的道路。

 ◆ 数据说话,数据面前谁也别说话!

 ◆不认为事务这个方向是错误的,如果jQuery原生就能支持事务这样的概念,会不会有其他的点可以优化?比如一个事务自动会将父元素脱离出DOM树之类的
 

原文链接:http://www.otakustay.com/a-failure-in-jquery-optimization/

【编辑推荐】

  1. jQuery 1.5正式版发布 五大变化引人注目
  2. 18个***最给力的jQuery教程分享
  3. 使用 jQuery 简化 Ajax 开发
  4. jQuery实现表格数据的动态添加与统计
  5. jQuery1.5新特征之插件机制的救赎
责任编辑:陈贻新 来源: 张立理的博客
相关推荐

2021-01-08 13:52:15

Consul微服务服务注册中心

2023-03-31 09:22:40

Hi3861芯片Flash

2020-02-10 10:15:31

技术研发指标

2021-11-11 16:14:04

Kubernetes

2019-09-11 08:22:57

MySQL数据库远程登录

2021-07-30 07:28:16

SQL优化日志

2021-10-14 10:53:20

数据库查询超时

2020-08-10 11:00:02

Python优化代码

2013-01-17 10:31:13

JavaScriptWeb开发firebug

2021-05-13 08:51:20

GC问题排查

2013-04-01 10:27:37

程序员失业

2023-06-07 07:31:04

PC端app脱壳技巧

2019-03-15 16:20:45

MySQL死锁排查命令

2021-12-20 10:15:16

zip密码命令网络安全

2011-09-27 10:35:44

2022-03-02 09:01:07

CPU使用率优化

2014-08-11 09:31:52

2017-07-07 16:07:41

2023-04-06 07:53:56

Redis连接问题K8s

2020-06-05 08:53:31

接口性能实践
点赞
收藏

51CTO技术栈公众号