JQuery性能优化方法

尽管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

结论

    1. 总体上来说A>C>B
    2. 方案A有大约25%的性能提升,但是不稳定。追求极致性能,用方案A;
    3. 循环数量少的话,建议使用方案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

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

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

时间: 2024-10-08 13:51:09

JQuery性能优化方法的相关文章

jquery性能优化的十种方法

jquery性能优化的十种方法 有时候我们在书写jquery的时候,为了书写代码方便,往往忽略了程序执行过程中,给客户端带来的压力.随之而来的就是在某些低端浏览器或者低端电脑上运行速度缓慢,甚至无法运行等问题. 因此我们有必要对我们自己书写的jquery代码进行优化,以达到更快捷.更流畅的运行效果. 在这里整理了十种jquery优化的方法,如下: 1,总是从ID选择器开始继承在jQuery中最快的选择器是ID选择器,因为它直接来自于JavaScript的getElementById()方法.例如

jQuery性能优化指南(转载)

现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开发, 性能问题还是需要引起重视的. 在twitter上发现了jQuery Performance Rules这篇文章, 简单的摘译了一下: 1.总是从ID选择器开始继承2.在class前使用tag3.将jquery对象缓存起来4.掌握强大的链式操作 5.使用子查询6.对直接的DOM操作进行限制7.冒泡8

jQuery性能优化的38个建议

一.注意定义jQuery变量的时候添加var关键字 这个不仅仅是jQuery,所有javascript开发过程中,都需要注意,请一定不要定义成如下: $loading = $('#loading'); //这个是全局定义,不知道哪里位置倒霉引用了相同的变量名,就会郁闷至死的 二.请使用一个var来定义变量 如果你使用多个变量的话,请如下方式定义: .代码如下: varpage = 0, $loading = $('#loading'), $body = $('body'); 不要给每一个变量都添

jquery 性能优化的28个建议[整理]

一.选择器性能优化建议  1.总是从#id选择器来继承这是jquery选择器的一条黄金法则.jquery选择一个元素最快的方法就是用ID来选择. $('#content').hide(); 或者从ID选择器继承来选择多个元素: $('#content p').hide(); 2. 在class前面使用tag jQuery中第二快的选择器就是tag选择器(如$(‘head’)),因为它和直接来自于原生的Javascript方 法getElementByTagName().所以最好总是用tag来修饰

Linux网络性能优化方法简析

Linux网络性能优化方法简析 2010-12-20 10:56 赵军 IBMDW 字号:T | T 性能问题永远是永恒的主题之一,而Linux在网络性能方面的优势则显而易见,这篇文章是对于Linux内核中提升网络性能的一些优化方法的简析,以让我们去后台看看魔术师表演用的盒子,同时也看看内核极客们是怎样灵活的,渐进的去解决这些实际的问题. AD:2014WOT全球软件技术峰会北京站 课程视频发布 对于网络的行为,可以简单划分为 3 条路径:1) 发送路径,2) 转发路径,3) 接收路径,而网络性

DevExpress ChartControl大数据加载时有哪些性能优化方法

DevExpress ChartControl加载大数据量数据时的性能优化方法有哪些? 关于图表优化,可从以下几个方面解决: 1.关闭不需要的可视化的元素(如LineMarkers, Labels等): Series.View.LineMarkerOptions.Visible =false. 2. 关闭图表的滚动与缩放功能,手动调整范围,这样将大大减少所需计算的个数. 3. 将 ChartControl.RefreshDataOnRepaint属性设为false 4. 将 ChartContr

Android性能优化方法(七)

Java从JDK1.2版本开始,就把对象的引用分为四种级别,从而使程序能更加灵活的控制对象的生命周期.这四种级别由高到低依次为:强引用.软引用.弱引用和虚引用. 这里重点介绍一下软引用和弱引用. 如果一个对象只具有软引用,那么如果内存空间足够,垃圾回收器就不会回收它:如果内存空间不足了,就会回收这些对象的内存.只要垃圾回收器没有回收它,该对象就可以被程序使用.软引用可用来实现内存敏感的高速缓存.软引用可以和一个引用队列(ReferenceQueue)联合使用,如果软引用所引用的对象被垃圾回收,J

Android性能优化方法(八)

Android SDK tools目录下提供一个观察布局的工具,层级观察器(Hierarchy Viewer).Hierarchy Viewer工具是一个非常好的布局优化工具,同时,你也可以通过它学习他人的布局.应该说是一个非常实用的工具. AD:WOT2014:用户标签系统与用户数据化运营培训专场 层级观察器(Hierarchy Viewer): Android SDK tools目录下提供一个观察布局的工具,层级观察器(Hierarchy Viewer).Hierarchy Viewer工具

Android性能优化方法(九)

通常我们写程序,都是在项目计划的压力下完成的,此时完成的代码可以完成具体业务逻辑,但是性能不一定是最优化的.一般来说,优秀的程序员在写完代码之后都会不断的对代码进行重构.重构的好处有很多,其中一点,就是对代码进行优化,提高软件的性能.下面我们就从几个方面来了解Android开发过程中的代码优化. 1)静态变量引起内存泄露 在代码优化的过程中,我们需要对代码中的静态变量特别留意.静态变量是类相关的变量,它的生命周期是从这个类被声明,到这个类彻底被垃圾回收器回收才会被销毁.所以,一般情况下,静态变量