一次失败的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 相关文章推荐
JS在IE和FF下attachEvent,addEventListener学习笔记
Nov 26 Javascript
javascript 随机展示头像实现代码
Dec 06 Javascript
Jquery 实现grid绑定模板
Jan 28 Javascript
JavaScript事件委托实例分析
May 26 Javascript
简介AngularJS中使用factory和service的方法
Jun 17 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 Javascript
基于socket.io+express实现多房间聊天
Mar 17 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
javascript获取指定区间范围随机数的方法
Sep 08 Javascript
AngularJS实现表单元素值绑定操作示例
Oct 11 Javascript
jquery操作select常见方法大全【7种情况】
May 28 jQuery
Vue监听滚动实现锚点定位(双向)示例
Nov 13 Javascript
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
重置版宣传动画
2020/04/09 魔兽争霸
把PHP安装为Apache DSO
2006/10/09 PHP
PHP 函数学习简单小结
2010/07/08 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
如何解决PHP无法实现多线程的问题
2015/09/25 PHP
PHP封装的MSSql操作类完整实例
2016/05/26 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
PHP校验15位和18位身份证号的类封装
2018/11/07 PHP
php swoft框架实例用法
2020/12/22 PHP
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
2011/09/17 Javascript
jQuery取消特定的click事件
2016/02/29 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
JS 实现百度搜索功能
2018/02/01 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
JavaScript中CreateTextFile函数
2020/08/30 Javascript
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[32:17]完美世界DOTA2联赛循环赛LBZS vs Forest第二场 10月30日
2020/10/31 DOTA
python的常见命令注入威胁
2013/02/18 Python
详解python单例模式与metaclass
2016/01/15 Python
python tkinter窗口最大化的实现
2019/07/15 Python
python实现统计代码行数的小工具
2019/09/19 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
详解用selenium来下载小姐姐图片并保存
2021/01/26 Python
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
高中校园广播稿
2014/01/11 职场文书
乡下人家教学反思
2014/02/01 职场文书
村长反四风问题个人对照检查材料
2014/09/21 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
婚礼上证婚人致辞
2015/07/28 职场文书
Nginx反向代理及负载均衡如何实现(基于linux)
2021/03/31 Servers
带你了解CSS基础知识,样式
2021/07/21 HTML / CSS