首页 > 代码库 > jQuery性能优化
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
jQuery性能优化