jQuery性能优化

1、使用最新版本的jQuery类库

jQuery每一个版本的更新都会进行一些Bug修复和一些优化,同时也会包含一些创新。但是,需要注意版本的兼容性,不要忘记测试你的代码。

2、使用合适的选择器

不同的选择器其性能也有差异,总的来说$("id")>$("p")>$(".class")>$("[attribute=value]")>$(":hidden")。

对于$(".class"),比较新的浏览器如IE9,它支持本地方法document.getElementByClassName(),而对于老的浏览器,如IE8及之前版本,只能靠使用DOM搜索方式来实现,这无疑对性能产生较大的影响,所以应该有选择性的使用。

注意:1、尽量使用ID选择器;2、尽量给选择器指定上下文。

3、缓存对象

有以下代码:

#("traffic_light input.on").bind("click",function(){...});
#("#traffic_light input.on").css("border",1px dashed yellow");
#("#traffic_light input.on").css("background-color",orange");
#("traffic_light input.on").fadIn("slow");

jQuery会在创建每一个选择器的过程中,查找DOM,创建多个jQuery对象,下面是一个较优的写法:

var $active_light=#("traffic_light input.on");//缓存变量
$active_light.bind("click",function(){...});
$active_light.css("border",1px dashed yellow");
$active_light.css("background-color",orange");
$active_light.fadIn("slow");

当然如果使用链式方式将更加简洁。

永远不要让相同的选择器在你的代码里出现多次。

4、循环时的DOM操作

下面是一个循环添加DOM节点的例子,代码如下:

var top_100 list=[...],//假设这里是100个独一无二的字符串
$mylist=$("#mylist");//jQuery选择到<ul>元素
for(var i=0,l=top_100_list.length;i<1;i++){
    $mylist.append("<li>"+top_100_list[i]+"</li>");
}

以上代码,每一个新添加的标签元素都作为一个节点添加到窗口ID中,我们可以将整个元素字符串在插入DOM之前全部创建好,减少DOM操作。代码如下所示:

var top_100_list=[...],$mylist=$("#mylist"),
top_100_li="";//这个变量将用来存储我们的列表元素
for(var i=0,l=top_100_list.length;i<1;i++){
    top_100_li+="<li>"+top_100_list[i]+"</li>";
}
$mylist.html(top_100_li);

 

5、数组方式使用jQuery对象

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

//each()方法
$.each(array,function(i){
    array[i]=i;
}

//for代替each()方法
var array=new Array();
for(var i=0;i<array.length;i++){
    array[i]=i;
}

 

6、事件代理

也即事件委托,利用事件冒泡机制,通过绑定父节点,来对事件进行监听。

//未使用事件代理
$(‘myTable td‘).click(function(){
    $(this).css(‘background‘,‘red‘);
});

//使用事件代理
$(‘myTable‘).click(function(e){
   var $clicked=$(e.target);    //e.target 捕捉到触发的目标元素
    $clicked.css(‘background‘,‘red‘);
});

 

7、将你的代码转化成jQuery插件

插件可以使代码具有更好的重用性,并且能够有效的帮助你组织代码。创建一个插件代码如下:

;(function($){
    $.fn.yourPluginName=function(){
    //Your code goes here
    return this;
})(jQuery);

 

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

通过创建一个数组,然后循环,最后使用join()把数组转化为字符串,而不是使用"+"会有助于优化性能,尤其是长字符串处理的时候。

var array=[];
for(var i=0;i<=10000;i++){
    array[i]=‘<li>‘+i+‘</li>‘;
}
$(‘#list‘).html(array.join(‘‘));

 

9、合理利用HTML5的Data属性

HTML5的data属性可以帮助我们插入数据,特别是前后端的数据交换。jQuery的data()方法,有效的利用HTML5的属性,来自动得到数据。下面是个例子:

<div id="dl" data-role="page" data-last-value="43" data-options=‘{"name":"John"}‘></div>

为了读取数据,你需要使用如下代码:

$("#dl").data("role");    //"page"
$("#dl").data("lastValue");    //43
$("#dl").data("option").name;    //"John"

 

10、尽量使用原生的JavaScript方法

11、压缩JavaScript

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。