一次失败的jQuery优化尝试小结


Posted in Javascript onFebruary 06, 2011

(这并不意味着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个节点:
jQuery('div').css('height', 300).css('width', 200);
而在我的想法中,在一个“事务”中,可以如数据库的操作一般,通过保存所有的操作,在“提交事务”的时候统一进行,将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; 
};

测试环境
测试使用以下条件:
5000个div放在一个容器(<div id="container"></div>)中。
使用$('#container>div')选择这5000个div。
每个div要求设置一个随机背景色(randomColor函数),和800px以下的随机宽度(randomWidth函数)。
参加测试的调用方法有3个:
正常使用法:
$('#container>div') 
.css('background-color', randomColor) 
.css('width', randomWidth);

单次循环法:
$('#container>div').each(function() { 
$(this).css('background-color', randomColor).css('width', randomWidth); 
});

事务法:
$('#container>div') 
.begin() 
.css('background-color', randomColor) 
.css('width', randomWidth) 
.commit();

对象赋值法:
$('#container>div').css({ 
'background-color': randomColor, 
'width': randomWidth 
});

测试浏览器选择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);

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

教训和总结
千万要找到正确的性能瓶颈再进行优化,盲目的猜测只会导致走上错误而偏激的道路。
数据说话,数据面前谁也别说话!
不认为“事务”这个方向是错误的,如果jQuery原生就能支持“事务”这样的概念,会不会有其他的点可以优化?比如一个事务自动会将父元素脱离出DOM树之类的……

Javascript 相关文章推荐
Javascript条件判断使用小技巧总结
Sep 08 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
生成二维码方法汇总
Dec 26 Javascript
在Python中使用glob模块查找文件路径的方法
Jun 17 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
Apr 24 Javascript
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
vue组件传递对象中实现单向绑定的示例
Feb 28 Javascript
layer弹出层自定义提交取消按钮的例子
Sep 10 Javascript
JavaScript中的类型检查
Feb 03 Javascript
JS如何把字符串转换成json
Feb 21 Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 Javascript
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
DOM_window对象属性之--clipboardData对象操作代码
Feb 03 #Javascript
基于jQuery的自动完成插件
Feb 03 #Javascript
jQuery初学:find()方法及children方法的区别分析
Jan 31 #Javascript
javascript event 事件解析
Jan 31 #Javascript
javascript getElementsByTagName
Jan 31 #Javascript
js对象数组按属性快速排序
Jan 31 #Javascript
javascript 节点排序 2
Jan 31 #Javascript
You might like
第五节 克隆 [5]
2006/10/09 PHP
php获取文件夹路径内的图片以及分页显示示例
2014/03/11 PHP
php文件管理基本功能简单操作
2017/01/16 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
javascript获取URL参数与参数值的示例代码
2013/12/20 Javascript
jquery实现搜索框常见效果的方法
2015/01/22 Javascript
JavaScript实现找质数代码分享
2015/03/24 Javascript
javascript滚轮事件基础实例讲解(37)
2017/02/14 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
vue使用vue-cli快速创建工程
2017/07/28 Javascript
vuex state及mapState的基础用法详解
2018/04/19 Javascript
js实现按钮开关单机下拉菜单效果
2018/11/22 Javascript
vue基本使用--refs获取组件或元素的实例
2019/11/07 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
2020/03/31 Javascript
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python是编译运行的验证方法
2015/01/30 Python
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
python下MySQLdb用法实例分析
2015/06/08 Python
Python使用sorted排序的方法小结
2017/07/28 Python
flask入门之表单的实现
2018/07/18 Python
Cpython解释器中的GIL全局解释器锁
2020/11/09 Python
CSS3伪类选择器:nth-child()
2009/04/02 HTML / CSS
英国定做窗帘和纺织品面料一站式商店:Dekoria
2018/08/29 全球购物
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
感恩之星事迹材料
2014/05/03 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
酒店人事主管岗位职责
2015/04/11 职场文书
歌舞青春观后感
2015/06/10 职场文书
禁毒主题班会教案
2015/08/14 职场文书
2015年文秘个人工作总结
2015/10/14 职场文书
浅谈如何写好演讲稿?
2019/06/12 职场文书
个人工作失误的保证书怎么写?
2019/06/21 职场文书