mackxu
子曰:学而时习之,不亦说乎?

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

posted on 2013-08-05 23:04  mackxu  阅读(510)  评论(0编辑  收藏  举报