《锋利的jquery》之——jquery性能优化
转自《锋利的jquery》第十一章，电子书及源码 http://www.cnblogs.com/akou/p/4461557.html.
一，性能优化
1，使用追新版本的jquery类库
jquery每一个新的版本都会较上一个版本进行bug修复和优化，同时也包含一些创新，所以建议使用最新版本的jquery来提高性能。不过需要注意的是，更换版本之后，不要忘记测试代码，有的时候不是完全向后兼容。（write less do more！）
2，使用合适的选择器
使用id来定位DOM元素是最佳提高性能的方式，因为jquery底层将直接调用本地方法document.getElementById()。如果不能直接找到需要的元素，可以考虑使用find()方法，为了提高性能建议从最近的id开始往下搜索，性能第二优的是标签选择器，标签选择器直接调用本地方法document.getElementByClassName()，往后依次是class选择器，和属性选择器。
3，缓存对象
在书写jquery代码中，经常用如下书写方式：
$("#traffic_light input.on").bind("click",function(){...});
$("#traffic_light input.on").css("border","1px solod #fff");
$("#traffic_light input.on").css("background","#fff");
$("#traffic_light input.on").fadeIn("slow");
这样的结果导致jquery会在创建每一个选择器的过程中。查找dom，创建多个jquery对象，比较好的书写方式如下，尽量不要让相同的选择器在代码中多次出现。
var $active_light = $("#traffic_light input.on");//缓存变量
$("#traffic_light input.on").bind("click",function(){...});
$("#traffic_light input.on").css("border","1px solod #fff");
$("#traffic_light input.on").css("background","#fff");
$("#traffic_light input.on").fadeIn("slow");
4，循环时的DOM操作
使用jquery可以方便添加，删除或修改DOM节点，但是在一些循环中需要注意：
var top_100_list = [...] //假设这里是100个独一无二的字符串
$myist = $("#mylist"); //jquery选择到<ul>元素
for（var i=0,l = top_100_list.length;i<l;i++）{
$mylist>append("<li>" + top_100_list[i]+"</li>");
}
以上代码中，我们将每一个添加的标签元素都作为一个节点添加容器ID中，实际上jquery操作消耗的性能也不低，所以更好的方式是尽可能减少DOM操作，这里应该将整个元素字符串在插入DOM前全部创建好，修改代码如下：
var top_100_list = [...],$mylist = $("#mylist"),
top_100_li = ""; // 这个变量将用来存储我们的列表元素
for(var i = 0,l = top_100_list.length;i<l;i++){
top_100_li+="<li>" + top_100_list[i] + "</li>";
}
$mylist.html(top_100_li);
5，数组方式使用jquery对象
使用jquery选择器获取的结果是一个jquery对象。然而，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;
}
6，事件代理
每一个JavaScript事件（click，mouseover）都会冒泡到父级节点。当我们给多个元素调用同个函数时这点会很有用。比如，我们要为一个表格绑定这样的行为：点击td后，把背景设置为红色，代码如下：
$("#myTable td").click(function(){
$(this).css('background','red');
});
假设有100个td元素，在使用上方式的时候，你绑定了100个事件，这将带来很负面的影像。有什么更好的方式呢？ 代替这种多元素事件监听的方法就是，你只需向它们的父节点绑定一次事件，通过event.target 获取到点击的当前元素，代码如下
$('#myTable').click(function(e){
var $clicked = $(e.target); //e.target 捕捉到出发的目标元素
$clicked.css('background','red');
})
在改进的方式中，只为一个元素绑定了一个事件。很显然这种方式性能方面要优于之前那种，也可以用on(),帮助你将整个事件监听封装到一个便利的方法中。
$('#myTable').on()('click','td'.function(){
$(this).css('background','red');
});
7，将代码转化成jquery插件
如果每次都需要花时间去开发类似的jquery代码，那么你可以考虑将代码变成插件。
8，使用join来拼接字符串
使用join来拼接比使用“+”来拼接性能要好。
9，合理利用HTML5的Date属性
