您好,欢迎访问一九零五行业门户网

对于jQuery性能的一些优化建议_jquery

不要每次都在循环中访问数组的 length 属性,应在循环开始之前就将其缓存:
var mylength = myarray.length;for (var i = 0; i *'); // 极慢$('.buttons').children(); // 好多了$('.gender :radio'); // 隐式地使用通配符,慢$('.gender *:radio'); // 显式地使用通配符,同上,慢$('.gender input:radio'); // 嗯,快多了
使用事件代理
事件代理允许将一个事件绑定到某个容器上(例如一个无序列表 ul),而不是绑定到容器内所有元素上(例如列表元素 li)。虽说 $.fn.live 和 $.fn.delegate 都是将事件绑定到容器上,但是应尽可能是用 $.fn.delegate,毕竟其明确的上下文(相较于 $.fn.live 的上下文是 document)要小得多,避免了很多不必要的过滤。
除了性能方面的提升,如果给绑定了事件的容器内添加新元素,那么这些新元素就无须再次绑定事件了,这也是个优点。
// 不好 (如果列表元素非常多,你就悲剧了)$('li.trigger').click(handlerfn);// 好些:使用 $.fn.live 进行事件代理$('li.trigger').live('click', handlerfn);// 最好:使用 $.fn.delegate 进行事件代理// 因为这样可以明确的指定一个上下文$('#mylist').delegate('li.trigger', 'click', handlerfn);
将元素从 dom 卸载出来再操作
dom 操作是比较慢的,所以应尽量避免直接操作 dom。jquery 在其 1.4 版中引入了 $.fn.detach 方法,可以将元素从 dom 中卸载出来然后进行操作,操作好了之后再添加到 dom 中:
var $table = $('#mytable');var $parent = $table.parent();$table.detach();// ... 例如这里给表格添加了很多很多行$parent.append(table);
使用外部样式表为大量元素修改样式
当使用 $.fn.css 为超过 20 个元素修改样式时,应考虑直接在页面中添加 style 标签,据说性能可提升 60%。
// 当元素少于 20 个时使用这个方法,多余 20 个时,速度就慢了$('a.swedberg').css('color', '#asd123');// 多余 20 个元素时,应考虑直接在页面中添加 style 标签$('') .appendto('head');
使用 $.data 替代 $.fn.data
将 $.data 应用于 dom 元素上,比直接在选择器上调用 $.fn.data 要快 10 倍。当然,前提是要先明白 dom 元素和 jquery 结果集之间的区别。
// 速度一般$(elem).data(key,value);// 速度提升 10 倍$.data(elem,key,value);
别在空元素上浪费时间
jquery 不会主动告诉你,你正在一个空白的结果集上运行代码 – 而且执行过程中并未出错。所以有时候再执行代码之前,需要先判断一下结果集是否为空:
// 不好:执行了三个函数之后// 才发现结果集上没有任何元素$('#nosuchthing').slideup();// 好var $myselection = $('#nosuchthing');if ($myselection.length) { $myselection.slideup(); }// 最好:增加一个 doonce 插件jquery.fn.doonce = function(func){ this.length && func.apply(this); return this;}$('li.cartitems').doonce(function(){ // 这里可以确保结果集不是空的});
这种方法特别适用于 jquery ui 方面,因为即使结果集中不包含任何元素,其开销也会很大。
变量的定义
可以在一条语句中定义多个变量:
// 老掉牙的写法var test = 1;var test2 = function() { ... };var test3 = test2(test);// 新写法var test = 1, test2 = function() { ... }, test3 = test2(test);
在自执行函数中,变量甚至可以不用定义:
(function(foo, bar) { ... })(1, 2);
条件判断
// 土方法if (type == 'foo' || type == 'bar') { ... }// 较先进的方法if (/^(foo|bar)$/.test(type)) { ... }// 使用对象查找if (({ foo : 1, bar : 1 })[type]) { ... }
其它类似信息

推荐信息