将jquery对象缓存起来在
for循环中，不要每次都要访问数组的length属性，我们应该先将对象缓存进一个变量然后再操作，如下所示：
复制代码 代码如下:
var mylength = myarray.length;
for (var i = 0; i // 要做的事
}
在循环外使用append
进行dom操作是有代价的，如果需要往dom中添加大量元素，你应该一次批量完成，而不是一次一个。
复制代码 代码如下:
// 别这样
$.each(reallylongarray, function(count, item) {
var newli = '' + item + '';
$('#ballers').append(newli);
});
//较好的做法
var frag = document.createdocumentfragment();
$.each(reallylongarray, function(count, item) {
var newli = '' + item + '';
frag.appendchild(newli[0]);
});
$('#ballers')[0].appendchild(frag);不要在each()里用$('#id')的选择器，会有多次遍历查找dom元素，效率极低用document.createdocumentfragment()来减少页面的dom结构改变的次数、刷新的次数
// 或者这样
var myhtml = '';
$.each(myarray, function(i, item) {
html += '' + item + '';
});
$('#ballers').html(myhtml);
保持简洁风格
复制代码 代码如下:
// 不理想
if ($ventfade.data('currently') != 'showing') {
$ventfade.stop();
}
if ($venthover.data('currently') != 'showing') {
$venthover.stop();
}
if ($spans.data('currently') != 'showing') {
$spans.stop();
}
// 较好的
var elems = [$ventfade, $venthover, $spans];
$.each(elems, function(k, v) {
if (v.data('currently') != 'showing') {
v.stop();
}
})
慎用匿名函数
匿名函数的约束到处都是一种痛苦。他们难以调试，维护，测试或重用。相反，我们可以使用对象封装，将那些处理和回调函数组织并通过命名管理起来。
复制代码 代码如下:
// 不要这样
$(document).ready(function() {...
$('#magic').click(function(e) {
$('#yayeffects').slideup(function() {...
});
});
$('#happiness').load(url + ' #unicorns', function() {...
})
});
// 较好的
var pi = {
onready: function() {...
$('#magic').click(pi.candymtn);
$('#happiness').load(url + ' #unicorns', pi.unicorncb);
},
candymtn: function(e) {
$('#yayeffects').slideup(pi.slidecb);
},
slidecb: function() {...
},
unicorncb: function() {...
}
}
$(document).ready(pi.onready);
优化选择器
节点选择和dom操作, 根据给定的id匹配一个元素总是使用#id去寻找element
复制代码 代码如下:
// 非常快
$('#container div.robotarm');
// 超级快
$('#container').find('div.robotarm');使用$.fn.find方法更快一些，因为第一个选择器是无须经过选择器引擎处理，在jquery中最快的选择器是id选择器.因为它直接来自于javascript的getelementbyid()方法，这是非常快，因为它是原产于浏览器。如果你需要选择多个元素，这必然会涉及到dom遍历和循环，为了提高性能，建议从最近的id开始继承。
具体指定选择器的右侧部分应该尽可能具体，左侧则不需要那么具体。
复制代码 代码如下:
// 未优化
$('div.data .gonzalez');
// 优化后
$('.data td.gonzalez');如果可以，尽量在选择器靠右侧的部分使用tag.class，而左侧只有tag或者只有.class。
避免过度的具体
复制代码 代码如下:
$('.data table.attendees td.gonzalez');
// 不写中间的会更好
$('.data td.gonzalez');清爽的dom结构也有助于改善选择器的性能，选择器引擎可以少跑几层去寻觅那个元素了。
避免使用无定向通配符选择器
复制代码 代码如下:
$('.buttons > *'); // 极慢
$('.buttons').children(); // 快很多
$('.gender :radio'); // 无定向搜索
$('.gender *:radio'); // 同上
$('.gender input:radio'); // 这样 好很多
使用事件委派
事件委派允许你为一个容器元素（例如，一个无序列表）绑定一个事件处理程序，而不需给容器内每个元素（例如，列表项）都去绑定。jquery提供$.fn.live和$.fn.delegate。如果可能的话，你应该使用$.fn.delegate而不是$.fn.live，因为它省去了不必要的选择需要，其明确的情况下（对$.fn.live的文档的上下文），减少了大约80 % 的开销。除了有性能提升的好处，事件委派也使你在往容器里添加新元素时无需重新绑定事件，因为已经有了。
通过事件委派一次绑定多种事件，以减少事件冗余
复制代码 代码如下:
// 不好的 (如果列表里面元素很多)
$('li.trigger').click(handlerfn);
// 较好的: event delegation with $.fn.live
$('li.trigger').live('click', handlerfn);
// 最优的: $.fn.delegate
$('#mylist').delegate('li.trigger', 'click', handlerfn);
移除元素
dom操作是慢的，你应该尽量避免去操作它。jquery在1.4版引入了
$.fn.detach从dom中去掉所有匹配的元素。
复制代码 代码如下:
var $table = $('#mytable');
var $parent = table.parent();
$table.detach();
// ... 添加大量的行到表格中
$parent.append(table);
.detach()和.remove()一样, 除了.detach()保存所有jquery数据和被移走的元素相关联。当需要移走一个元素，不久又将该元素插入dom时，这种方法很有用。
当大量元素修改css，应该使用样式表
如果你在用$.fn.css给多于20个元素修改css，考虑一下添加一个style标签，这样可以速度可以提升60 % 。
复制代码 代码如下:
// 多于20个 明显慢
$('a.swedberg').css('color', '#asd123');
$('').appendto('head');
使用$.data而不是$.fn.data将$.data应用于dom元素比直接调用jquery选择结果的$.fn.data要快上10倍.虽然，这要先确定你是理解dom元素与jquery选择结果之间的区别的。
复制代码 代码如下:
// 常用
$(elem).data(key, value);
// 快十倍
$.data(elem, key, value);
别费时间在空白的选择结果上了
jquery将不会告诉你，如果你想运行的代码在一个空选择上，它会继续运行，好像没有什么错。影响性能。
复制代码 代码如下:
//太遭了，执行了三个方法后才意识到里面是空的
$('#nosuchthing').slideup();
// 较好
var $myselection = $('#nosuchthing');
if ($myselection.length) {
myselection.slideup();
}
// 最佳: add a doonce plugin
jquery.fn.doonce = function(func) {
this.length && func.apply(this);
return this;
}
$('li.cartitems').doonce(function() {
// make it ajax! \o/
});这层保护是适用于jquery ui widget，因为即使操作的元素为空其开销也不少。
定义变量
变量可以定义一个声明而不是几个
复制代码 代码如下:
// 老套写法
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]) {...
}
作者：曾祥展
出处：学无止境 （http://www.cnblogs.com/zengxiangzhan/）