jquery性能优化

最近学习了锋利的jqury，记录以下优化jqury的方法，个人感觉挺不错的，学习jqury的可以看一下这本书

一、使用最新的jq

二、标签选择器

建议从ID选择器开始, 因为在jquery里获取id是直接封装js的document.getElementById() 性能最佳; $("#Id");

标签选择器，直接封装document.getElementsByTagName() 性能第二 $("p");

三、缓存对象

var $id =  $("#Id"); //使用变量保存起来，这样可以在多个函数里调用，就不用每次在函数里重新获取

四、减少的DOM操作

错误的：
var  list = [a,b,c,d];  //假如这里有100条数据
var $list = $(".list")
for(var i = 0; i< list.length; i++){
    $list.append("<li>"+list[i]+"</li>");  //在这里重复进行了100次dom操作，
}
或者是
var  list = [a,b,c,d];  //假如这里有100条数据
for(var i = 0; i< list.length; i++){
    var $list = $(".list")  //重复获取了100次
    $list.append("<li>"+list[i]+"</li>");  //在这里重复进行了100次dom操作，
}
正确的：
var  list = [a,b,c,d];  //假如这里有100条数据
var $list = $(".list")
var mylist = ""
for(var i = 0; i< list.length; i++){
    mylist += "<li>"+list[i]+"</li>";  
}
$list.append(mylist);   //在这里只进行了一次dom操作

五、数组方式使用jqury对象

使用jqury选择器获取结果是一个jqury对象，然而，jquery类库会让你感觉你正在使用一个定义了索引和长度的数组，

在性能方面，建议使用简单for或者while循环来处理，而不是$.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;
}

六、事件代理

1、$("#list td").click(function(){
    $(this).css("background","red"); //假如有100个td元素，在使用这个方式时，就绑定了100个事件，这将带来很负面的性能影响
})

2、
$("#list").click(function(e){
    var $list = (e.target);
    $list.css("background","red")  //在这会发现点#list 的时候就会把list的背景也变成红色， 
})

3、
$("#list").on("click",function(e){
		var $list  =  $(e.target);
		var istd = $list.prop("tagName");  //获取标签类型 
		if(istd == "TD"){        //如果标签为td就执行以下的步骤 
			$list.css({"background":"red","color":"white"})
		}
})

七、封装成插件

把所有代码都封装成插件，

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

优化长字符串

var $div = $("div")
var array = [];
for(var i = 0; i<=1000; i++){
    array[i] = "<span>"+i+"</span>"
}
$div.html(array.join("")); 

九、合理使用html5的data属性

<div id="arr" data-value="数据"></div>
var ArrData = $("#arr").data("value")
console.log(ArrData);

十、尽量使用原生javascript

十一、压缩js