jQuery性能优化

大家都知道jQuery非常流行，是前端开发中重要的类库之一，也成为构建丰富web前端的利器。但是作为一个javascript类库，很多人并不是很清楚如何正确的使用jQuery来达到最佳的性能，特别是复杂的动画和web应用，它可能成为性能瓶顶。

我将在本篇文章中介绍我们在使用jQuery时，应该注意的一些性能问题，希望对大家开发高性能的web应用有所帮助。

使用最新版本的jQuery类库

JQuery每一个新的版本都会对上一个版本进行BUG修复和一些优化，同时也会包含一些创新，所以建议使用最新版本的jQuery的提高性能。不过你需要注意的是，在更换版本之后，不要忘记测试你的代码，毕竟有时候不是完全向后兼容的。

使用合适的选择器

JQuery提供非常丰富的选择器DOM元素，选择器是开发人员最常使用的功能，但是很少开发人员会考虑使用不同选择器来处理性能问题。下面介绍几种常用选择器，以及他们之间的性能差异。

（1）$(“#id”)

使用id来定位DOM元素是最佳的提高性能的方式，因为jQuery底层将直接调用document.getElementById()。熟悉JavaScript的人都知道这个方法将直接通过元素id来返回对应的元素。当然，如果这个方式不能直接找到你需要的元素，那么你可以考虑调用find()方法。代码如下：

$(“#content”).find(“div”)

使用以上方法可以有效的缩小你定位的DOM元素。为了提高性能，建议从最近的ID元素开始往下搜索。

（2）$(“p”) , $(“div”) , $(“input”)

标签选择器的性能也是不错的，它是性能优化的第二种选择，因为jQuery将直接调用本地方法document.getElementsByTagName()来找到DOM元素。

（3）$(“.class”)

这种方法有可以有选择性的使用。对于IE9以上的浏览器，它支持本地方法document.getElementByClassName(),而对于IE8或者更早的版本，只能使用DOM搜索方式来实现，这会对性能产生较大影响。

（4）$(“[attribute=value]”)

对于属性选择器，本地JavaScript方法中并没有直接的实现，大多都是使用DOM搜索方式来达到效果，很多新版本浏览器支持querySelectorAll()方法，但是不通浏览器间的性能还是有区别。总体来说，使用这种方式来定位DOM元素，性能并不是非常理想。所以为了获得更好的性能优化效果，建议在开发中尽量避免这种对性能有害的方式。

（5）$(“:hidden”)

和属性选择器类似，伪选择器也没有直接在本地JavaScript方法中实现，jQuery需要搜索每一个元素来定位这个选择器，这将产生比较大的性能问题看，所以建议大家尽量不要使用。如果坚持使用，先用ID选择器定位父元素，然后再使用，这样对性能优化会有帮助。代码如下：

$(“content”).find(“:hidden”);

注意：尽量使用ID选择器，尽量给选择器指定上下文。

三、缓存对象

在书写jQuery代码中，开发人员最常用如下书写方式：

$(“#ydm input.on”).bind(“click”,function(){ . . .});

$(“#ydm input.on”).css(“border”,”1px dashed yellow”);

$(“#ydm input.on”).css(“background-color”,”orange”);

$(“#ydm input.on”).fadeIn(“slow”);

这样写导致的结果是：jQuery会在创建每一个选择器的过程中，查找DOM，创建多个jQuery对象。比较好的书写方式如下：

var a=a=a=(“#ydm input.on”); //缓存变量

$a.bind(“click”,function(){ . . .});

$a.css(“border”,”1px dashed yellow”);

$a.css(“background-color”,”orange”);

$a.fadeIn(“slow”);

在这个例子中，如果使用链式操作将更加简洁，这里只是为了说明缓存变量的重要性，这和Java开发中不要随意创建对象一样，可以有效的提高代码运行性能。

链式操作改写如下：

var a=a=a=(“#ydm input.on”); //缓存变量

$a.bind(“click”,function(){ . . .});

.css({“border”:”1px dashed yellow”,

“background-color”:”orange”

});

.fadeIn(“slow”);

如果打算在其他函数中使用jQuery对象，可以把它们缓存在全局环境中。代码示例如下：

//在全局范围内定义一个对象（例如：window对象）

Window.$my={

head:$(“head”),

a:$(“#a”),

b:$(“#b”)

};

function do_something(){

//现在可以引用存储的结果并操作它们

var script=document.creatElement(“script”);

$my.head.append(script);

//当在函数内部操作时，可以继续将查询存入全局对象中去

my.liresults=my.li_results=my.liresults=(“#some_ul li”);

my.tdresults=my.td_results=my.tdresults=(“#some_table td”);

//将全局函数作为一个普通的jQuery去使用

$my.td_resules.css(“. . .”);

$my.a.css(“. . .”);

}

//也可以在其他函数中使用它

注意：不要让相同的选择器在代码中出现多次。

四、循环时的DOM操作

使用jQuery可以很方便的添加、删除或者修改DOM节点，但是在一些循环，例如for(),while()或者$each()中处理节点时，必须注意，代码如下：

var ydm_100_list=[. . .] //假设有一百分字符串

ydmlist=ydm_list=ydmlist=(ydm_list”) //选择到

元素

for(var i=0;<ydm_100_list.length;i++){

$ydm_list.append(“<li>”+ydm_100_list[li]+”</li>”);

}

以上代码中，将每一个新添加的标签元素都作为一个节点添加到容器ID中，实际上消耗的性能也不低，所以更好的方式是尽可能的减少DOM操作，将整个字符串在插入DOM之前全部创建好，再插入，代码如下：

var ydm_100_list=[. . .] //假设有一百分字符串

ydmlist=ydm_list=ydmlist=(ydm_list”) //选择到

元素

for(var i=0;<ydm_100_list.length;i++){

ydm_100_list+=”

”+ydm_100_list[li]+”
”;
}

$ydm_list.html(ydn_100_list);

五、数组方式使用jQuery对象

使用jQuery选择器获取结果是一个jQuery对象。然而，jQuery类库会让你感觉正在使用一个定义了索引和长度的数组。在性能方面，建议使用简单的for或者while循环来处理，而不是$.each(),这样能使你的代码更快。

$.each(array.function(i){

aray[i]=i;

});

使用for代替each（）方法，代码如下：

var array=new Array();

for(var i=0;i<array.length;i++){

array[i]=I;

}

六、事件代理

每一个JavaScript事件（例如:click,mouseover等）都会冒泡到父级节点。当我们需要给多个元素调用同个函数时，事件代理会很有用。比如，我们要为一个表格绑定这样的行为：点击td后，把背景颜色设置为红色，代码如下：

$(“#mytable td”).click(function(){

$(this).css(‘background’,’red’);

});

假设有100个td元素，在使用以上方式的时候，需要绑定100个事件，这将带来很负面的性能影响。

代替这种效率很差的多元素事件监听的方法就是，只需要向他们的父节点绑定一次事件，然后通过event.target获取到点击的当前元素，带入如下：

$(“#mytable”).click(function(e){

var clicked=clicked=clicked=(e.target); //e.targeta 捕捉到触发元素

$clicked.css(‘background’,’red’);

})

在改进的方式中，只为一个元素绑定了一个事件，性能得到很大的提升，在jQuery1.7之后的版本中提供了一个新的方式on(),可方便的将整个事件监听封装到一个便利的方法中，代码如下：

$(“#mytable”).on(‘click’,’td’,function(){

$(this).css(‘background’,’red’);

});

七、将代码转化成jQuery插件

如果每次都需要花费一定去开发类似的代码，可以考虑封装成插件，能够使代码具有更好的重用性，并且能够有效的组织代码。创建一个插件代码如下：

(function($){

$fn.yourPlugName=function(){

//your code goes here

Return this;

};

})(jQuery)；

八、使用join()来拼接字符串

使用join()拼接长字符串，而不要使用”+”来拼接字符串，有助于性能优化，特别是长字符串处理的时候。

首先创建一个数组，然后循环，最后使用join()把数组转化为字符串，代码如下：

var array=[];

for(var i=0;i<=10000;i++){

array[i]=’
’+i+’
’;
}

$(‘#list’).html(array.join(‘ ’));

九、合理利用html5中的Data属性

Html5的data属性可以帮助我们插入数据，特别是前后端的数据交换，jQuery的data()方法，有效的利用html5的属性，来自动得到数据，代码如下：

读取数据，需要用如下代码：

$(“#ydm”).date(“role”); //page

$(“#ydm”).date(“lastvalue”); //43

$(“#ydm”).data(“options”.name) //”john”

以上，是对jQuery性能优化的一些介绍，希望能研究出更多的jQuery开发性能优化的方法，开发出高性能的web引用。

jQuery性能优化相关推荐

jQuery 性能优化技巧
原文地址:jQuery 性能优化技巧博客地址:www.extlight.com 一.使用最新版本 jQuery 类库二.合理使用选择器 # 推荐使用 $("#id") # 可以 ...
jQuery性能优化指南(转载)
现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开发, ...
jQuery性能优化指南（1）
jQuery性能优化指南(1) 1,总是从ID选择器开始继承在jQuery中最快的选择器是ID选择器,因为它直接来自于JavaScript的getElementById()方法. 例如有一段HT ...
jQuery 性能优化指南（2）
这里的基本思想是在内存中建立你确实想要的东西,然后更新DOM . 这并不是一个jQuery最佳实践,但必须进行有效的JavaScript操作 .直接的DOM操作速度很慢. 例如,你想动态的创建一组列表 ...
jQuery性能优化指南
1,总是从ID选择器开始继承在jQuery中最快的选择器是ID选择器,因为它直接来自于JavaScript的getElementById()方法. 例如有一段HTML代码: <divid=&q ...
【必备】jQuery性能优化的38个建议
一.注意定义jQuery变量的时候添加var关键字这个不仅仅是jQuery,所有javascript开发过程中,都需要注意,请一定不要定义成如下: $loading = $('#loading'); ...
jquery 性能优化与实践
一.使用jQuery对象缓存 1.所谓对象缓存,就是在使用jQuery对象时,先尽量使用变量保存对象名,然后,通过变量进行相应的方法操作. 2.无论是局部还是全局性的变量,为了避免与其他变量名称冲突, ...
jQuery 性能优化
1.尽量使用最新版本的jQuery 类库. jQuery 每一个新的版本都会较上一版本进行bug修复和一些优化,同时也会包含一些创新,所以建议使用最新版本的jQuery来提高性能.不过更换新版本之后, ...
Jquery性能优化（转自蓝色理想）
现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开 ...

jQuery性能优化

jQuery性能优化相关推荐

最新文章

热门文章