1. 使用最新版本的jQuery
2. 用对选择器
(1) 最快的选择器:id选择器和标签选择器
(2) 较慢的选择器:class选择器
(3) 最慢的选择器:伪类选择器和属性选择器
3. 理解子元素和父元素的关系
$('.child', $parent)
$parent.find('.child') 最快
$parent.children('.child')
$('#parent > .child')
jQuery内部使用Sizzle引擎,处理各种选择器。Sizzle引擎的选择顺序是从右到左,所以这条语句是先选.child,然后再一个个过滤出父元素#parent,这导致它比最快的形式大约慢70%。
$('#parent .child') 最慢
$('.child', $('#parent'))
4. 不要过度使用jQuery
jQuery速度再快,也无法与原生的javascript方法相比。所以有原生方法可以使用的场合,尽量避免使用jQuery。
5. 做好缓存
选中某一个网页元素,是开销很大的步骤。所以,使用选择器的次数应该越少越好,并且尽可能缓存选中的结果,便于以后反复使用。
6. 使用链式写法
采用链式写法时,jQuery自动缓存每一步的结果,因此比非链式写法要快。
7. 事件的委托处理(Event Delegation)
大大简化事件的绑定。
8. 少改动DOM结构
(1) 改动DOM结构开销很大,因此不要频繁使用.append()、.insertBefore()和.insetAfter()这样的方法。如果要插入多个元素,就先把它们合并,然后再一次性插入。根据测试,合并插入比不合并插入,快了将近10倍。
(2) 如果你要对一个DOM元素进行大量处理,应该先用.detach()方法,把这个元素从DOM中取出来,处理完毕以后,再重新插回文档。根据测试,使用.detach()方法比不使用时快了60%。
(3) 如果你要在DOM元素上储存数据,不要写成下面这样:elem.data(key,value); 而要写成$.data(elem[0],key,value);
(4) 插入html代码的时候,浏览器原生的innterHTML()方法比jQuery对象的html()更快。
9. 正确处理循环
javascript原生循环方法for和while,要比jQuery的.each()方法快,应该优先使用原生方法。
10.尽量少生成jQuery对象
每当你使用一次选择器(比如$('#id')),就会生成一个jQuery对象。jQuery对象是一个很庞大的对象,带有很多属性和方法,会占用不少资源。所以,尽量少生成jQuery对象。
举例来说,许多jQuery方法都有两个版本,一个是供jQuery对象使用的版本,另一个是供jQuery函数使用的版本。由于后一种针对jQuery函数的版本不通过jQuery对象操作,所以相对开销较小,速度比较快。
来源:http://www.ruanyifeng.com/blog/2011/08/jquery_best_practices.html