jq性能优化的几种方法

一、用对选择器

最快的选择器：id选择器和元素标签选择器
遇到这些选择器的时候，jQuery内部会自动调用浏览器的原生方法（比如getElementById()），所以它们的执行速度快。

$('#id')
$('form')
$('input')

较慢的选择器：class选择器
$(’.className’)的性能，取决于不同的浏览器。Firefox、Safari、Chrome、Opera浏览器，都有原生方法getElementByClassName()，所以速度并不慢。但是，IE5-IE8都没有部署这个方法，所以这个选择器在IE中会相当慢。

二、理解父子关系

下面六个选择器，都是从父元素中选择子元素，建议使用find方法

$('.child', $parent)  //比最快的形式慢了5%-10%
$parent.find('.child')  //最快
$parent.children('.child')  //比最快的形式大约慢50%
$('#parent > .child')  //比最快的形式大约慢70%
$('#parent .child')  //最慢,比最快的形式慢了77%
$('.child', $('#parent'))  //最快的形式慢了23%

三、做好缓存

选中某一个网页元素，是开销很大的步骤。所以，使用选择器的次数应该越少越好，并且尽可能缓存选中的结果，便于以后反复使用。
缓存比不缓存，快了2-3倍

　var cached = jQuery('#top');
　cached.find('p.classA');
　cached.find('p.classB');

采用链式写法时，jQuery自动缓存每一步的结果，因此比非链式写法要快。根据测试，链式写法比（不使用缓存的）非链式写法，大约快了25%

$('div').find('h3').eq(2).html('Hello');

四、事件委托

javascript的事件模型，采用"冒泡"模式，利用这一点可以大大简化事件的绑定。比如，有一个表格（table元素），里面有100个格子（td元素），现在要求在每个格子上面绑定一个点击事件（click）。
可以这么写：

$("table").on("click", "td", function(){
　　$(this).toggleClass("click");
});

更好的写法，则是把事件绑定在document对象上面

$(document).on("click", "td", function(){
　　$(this).toggleClass("click");
});

如果要取消事件的绑定，就使用off()方法

$(document).off("click", "td");

参考文章
jQuery性能优化大全
jQuery代码优化的9种方法