JQuery性能优化方法

首页 > 代码库 > JQuery性能优化方法

2024-07-31 21:22:27 221人阅读

尽管JavaScript比JAVA C++慢很多，JQuery比原生Js还慢很多，但是我们通过良好的编程习惯还是能提高代码执行的效率。

一.选择器的使用

选择同一个元素，各种方法之间的性能是不一样的，有时候差异会特别大。通常比较常用的选择器有以下几个：

ID选择器 $("#id")

标签选择器 $("td")

类选择器 $(".target")

属性选择器 $("td[target=‘target‘]")

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

这5种选择器的性能是依次下降的：

性能顺序：ID选择器 > 标签选择器 > 类选择器 > 属性选择器 > 伪类选择器

二.避免执行全局查找

//错误的$("div.bizHelp"); //正确的$("bizHelp"); $("#container").find(".bizHelp");

保证查询的路径最短，性能最优　　

三.缓存对象

//错误的$(window).bind(‘click‘,function(){  //do someing...    });$(window).css(‘width‘,‘1000px‘);$(window).bind(‘load‘,function(){  //do someing...    });

//优化的var $win = $(window);$win.bind(‘click‘,function(){  //do someing...    });$win.css(‘width‘,‘1000px‘);$win.bind(‘load‘,function(){  //do someing...    });

四.采用样式表避免多次DOM style样式

var obj=$("#obj"); //A:obj.css("width",200);  obj.css("height",200);  obj.css("background":"#eee"); //B:obj.attr("style","width:200px;height:200px;background:#eee;");  //C://加个css .operation{width:200px;height:200px;background:#eee;}  obj.addClass("operation")

性能排序：C>B>A

五.减少对DOM元素的操作次数

//不好的$.each(arr,function(i){   $(window).append(‘<li>‘+arr[i]+‘</li>‘)});//优化的var _html=[];$.each(arr,function(i){   _html.push(‘<li>‘+arr[i]+‘</li>‘)});$(window).append(_html.join(‘‘));

六.优化事件冒泡

//不好的$(‘a‘).click(function(){    //do someing...});  //推荐的$(document.body).click(function(event){    if(event.target.tagName==‘A‘){        //do someing...    }});//JQuery的方法$(document.body).delegate("a","click",function(){ //do someing...});

七.更高效的遍历方式

var list=ul.find("li"),      e; //A:var i=list.length;  while(i--){      e=$(list[i])  } //B:list.each(function(){    e=$(this);  });  //C:$.each(list,function(){    e=$(this);  });

JQuery提供了$.fn.each()和$.each()两个方法来实现对集合的遍历，除此之外，还可以采用JS原生的for循环、while等来实现迭代，应该了解一下他们之间的性能差异：

测试说明：1w次执行耗时，单位毫秒/ms,统计三次运行的平均值

方案	IE6	IE7	IE8	IE9	chrome	firefox	opera	safari
A	172	219	157	30	3	5	4	6
B	219	234	203	41	4	6	5	8
C	219	234	187	52	3	4	5	7

结论

总体上来说A>C>B
方案A有大约25%的性能提升，但是不稳定。追求极致性能，用方案A；
循环数量少的话，建议使用方案C，比较稳定；

八.优先使用原生属性

$.each(list,function(){    //A    var id=$(this).attr("id");    //B    var id=this.id;  })

很多常用的属性，比如id、name等都被浏览器原生实现，在JQuery中我们有时会用$(this).attr("id")的方式来获取id，这种方法的效率相比原生属性的获取效率而言，非常慢。

使用原生的API，可以极大的提高性能

测试说明：10w次执行耗时，单位毫秒/ms,统计三次运行的平均值

方案	IE6	IE7	IE8	IE9	chrome	firefox	opera	safari
A	6880	7030	4220	1188	157	244	133	135
B	310	310	150	27	4	5	17	3

九.可能的话，使用最新版本的JQuery

新版本总会对性能进行改进，还会提供一些新的方法。

如果可以的话，应该尽量选用最新的版本；

JQuery性能优化方法

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > JQuery性能优化方法