jQuery知识篇三(代码优化篇)

本文介绍了几种提高前端性能的方法,包括高效的选择器使用、事件委托、数据存储优化及循环遍历的最佳实践。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、使用最佳选择器

 

     通常比较常用的选择器有以下几个:

 

        1.ID选择器 $("#id")

 

        2.标签选择器 $("td")

 

        3.类选择器 $(".target")

 

        4.属性选择器 $("td[target='target']")

 

        5.伪类选择器 $("td:hidden")

 

    结论

 

        1.原生方法是最快的方法,如果可能,尽量选择用原生

 

        2.性能顺序:ID选择器 > 标签选择器 > 类选择器 > 属性选择器 > 伪类选择器

 

        3.ID(getElementById)、标签选择器(getElementsByTagName)都有原生的方法对应,所以很快;类选择器在除了IE5-IE8之外的主流浏览器几乎都有原生方法(getElementsByClassName),为了兼顾IE6、7、8的性能,避免使用全局的类选择器;

 

        4.属性和伪类选择器非常慢,如非必要,尽量少使用伪类选择器和属性选择器

 

    最佳实践

 

        1.为模块中操作最频繁的元素和根元素设置id,然后缓存;

 

        2.对没有id的元素检索,尽量采用路径最短的祖先元素id作为默认的搜索范围,并采用纯类选择器或者标签选择器;

 

        3.尽量避免复杂的选择器

 

 

2、父类查询子类 最佳模式:$parent.find('.child') 或者$('.child', $('#parent'))

                        最差模式:$('#parent .child')  或者 $('#parent > .child')

 

 

要在DOM元素中存储数据,使用$.data 要比 选择器.data 要快

       var elem = $("#ajia");

       $.data( elem[0],key,value )     >     elem.data(key,value);

       //这类写法亦可:$.data('#id',key,value);

 

       原因:因为elem.data()方法是定义在jQuery函数的prototype对象上面的,而$.data()方法是定义jQuery函数上面的,调用的时候不从复杂的jQuery对象上调用,所以速度快得多

 

 

3、使用事件委托

 

    给一个列表中所有元素添加点击事件,传统的做法是得到这个列表的JQuery对象:$("li"),然后添加click事件:

 

     $("li").click(function(){})

 

    这种方法的在列表数量比较大的时候会有严重的性能问题,应该值得关注。

 

    可以使用JQuery的事件委托机制,能很大程度的降低添加事件监听的消耗和内存的消耗

 

    A:

    var list=$("li");//length>1    list.click(function(){  })

 

    B:

    $("ul").delegate("li","click",function(){})  //或者1.7版本以后的 on 事件

 

结论

 

    委托的性能优势是非常绝对的;

 

最佳实践

 

    对于需要同时给两个以上的同类型元素添加事件时,用方案B来代替A

 

 

4、大循环采用更高效的遍历方式

 

 JQuery提供了$.fn.each()和$.each()两个方法来实现对集合的遍历,除此之外,还可以采用JS原生的for循环、while等来实现迭代:

 

 var list=ul.find("li");

A:

  var i=list.length; 

  while(i--){  

     e=$(list[i])  

  }

B:

  list.each(function(){  

     e=$(this);  

  });

C:

  $.each(list,function(){     

     e=$(this);  

  });

 

结论

 

    总体上来说A>C>B

 

最佳实践

 

    追求极致性能,用原生方法;

 

    循环数量少的话,建议使用$.each(),比较稳定;

        

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值