jquery性能优化及注意事项

PS:因为是抽空在记事本上手打的所以格式不太好谅解,如果有不对的希望指正


一、性能:
    
    1、首先jquery是基于js的一个内库,它最强大的和我们最常用的就是它的属性选择符(当然我是基于根本来说),因此对于优化最先开始的也就是选择器性能优化。
    
    2、jquery选择器是通过getElementById、getElementsByTagName等等来完成这个庞大功能的,因此在jquery中性能最佳查找最快的也就是ID了(当然ID在我们实际开发中为了和后端人员的配合应用的比较少),在能用ID的情况下尽量用ID。

    3、class查找,在说它之前,大家应该知道在jquery中第二快的选择器就是tag选择器(及标签查找),因为它是基于js中的getElementByTagName,因此我们在查找class的时候很有必要在class前加上tag标签名(如$(div.head)),当然如果这个class上层有ID那用ID和class组合就更加合适了(如 $("#wrapper").find(".head"));

注:用tag去修饰查找class会加快查找的速度,但是如果用它去修饰ID那结果就大大的相反了,因为在组合ID的情况下,它会先去遍历查找tag然后在去匹配ID这样就是画蛇添足了(同理用ID修饰查找ID一样)。


   4、组合查找,它是从选择器右边到左边逐一匹配,来选择范围的,因此在组合查找过程中一定要避免查找范围的长度(如 $("div.head ul li.cur")和$(".head li.cur"))这两者明显后期效率会高,这个原理就和css选择器一样,css选择器和它不同的是从左到右的查找(当然css选择器组合过长带来的蝴蝶效应更加严重因为它还涉及到优先级),同时在组合中要注意查找元素的变量存储,这个和js一样把已经查找的元素放到变量中继续储存注意可以减少多次查找。

   5、根据jquery的链式操作减少多余查找或者变量储存,因为jquery的链式操作比缓存效率会更高,如:$("p").click(function(){alert(1)}).css({"color":"#f00"}).fadeOut();

   6、对于文档操作jquery既然方便了我们的直接插入那就尽量避免直接的DOM操作(如先create一个UL然后在create它的内容li等);当然对于需要直接操作的,我们可以把它存入到一个变量中,进行组合添加,尽可能少的去多次更改html的结构。

二、注意:

   1、find这个查找不知道大家是不是习惯用的比较少,一定要注意$("table tr:even")和$("table").find("tr:even")的区别,在查找用find它们是基于父级划分的组,这么说不知道大家看会不会模糊,大家可以测试是在一个页面中2个table进行隔行换色用前者和后则的区别,前者是将所有的tr作为一个组经常划分,而后则着基于每个table去划分。

   2、事件重复多次绑定,在实例化对象的过程中绑定事件第一次执行后并未销毁再次执行会在已绑定的元素上再次进行事件绑定(这个现象大家可以测试下会发现第一次是执行一次,二第二次则是两次依次递增)而不是事件覆盖,因此在对象中或许需要多次执行的元素上绑定事件时先进行销毁初始化如 $("p").unbind("click").click(function(){alert(1)})

你可能感兴趣的:(jquery,事件多次执行,性能优化,隔行换色,选择器,jquery,性能优化,class,table,function,css)