JQuery性能优化
1，总是从ID选择器开始继承
这条原则就是有id尽量选id。
2，在class前使用tag(标签名)
3，将jQuery对象缓存起来
var $active_light = $(”#traffic_light input.on”);
$active_light.bind(”click”, function(){ … });
4，对直接的DOM操作进行限制
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);
原则就是先拼出所有的HTML，再插入DOM。
5，冒泡
除非在特殊情况下, 否则每一个js事件(例如:click, mouseover等.)都会冒泡到父级节点。
$(”#entryform input”).bind(”focus”, function(){
$(this).addClass(”selected”);
}).bind(”blur”, function(){
$(this).removeClass(”selected”);
});
改进成
$(”#entryform”).bind(”focus”, function(e){
var $cell = $(e.target); // e.target 捕捉到触发的目标元素
$cell.addClass(”selected”);
}).bind(”blur”, function(e){
var $cell = $(e.target);
$cell.removeClass(”selected”);
});
同理，
$(’#myTable td’).click(function(){
$(this).css(’background’, ‘red’);
});
改进方式：
$(’#myTable’).click(function(e) {
var $clicked = $(e.target);
$clicked.css(’background’, ‘red’);
});
在改进方式中，你只为一个元素绑定了1个事件
6，推迟到 $(window).load
$(document).ready可以在页面渲染时，其它元素还没下载完成就执行。
$(window).load在所有的html(包括<iframe>)被下载完成后执行
$(window).load(function(){
// 页面完全载入后才初始化的jQuery函数.
});
一些特效的功能，例如拖放, 视觉特效和动画, 预载入隐藏图像等等，都是适合这种技术的场合。
7，压缩JavaScript
在线压缩地址: http://dean.edwards.name/packer/
8，尽量使用ID代替Class
ID选择器的速度是最快的。所以在HTML代码中，能使用ID的尽量使用ID来代替class。
9，给选择器一个上下文
jQuery选择器中有一个这样的选择器，它能指定上下文。
jQuery( expression, context );
通过它，能缩小选择器在DOM中搜索的范围，达到节省时间，提高效率。
普通方式：
$(’.myDiv’)
改进方式：
$(’.myDiv’ , $(”#listItem”) )
这个方法比较占用资源。所以请尽量不要使用它。
11，子选择器和后代选择器
后代选择器经常用到，比如：$(”#list p”);
后代选择器获取的是元素内部所有元素。
而有时候实际只要获取 子元素，那么就不应该使用后代选择器。
应该使用子选择器，代码如下：
$(”#list > p”);
12，使用data()方法存储临时变量
下面是一段非常简单的代码，
$(function(){
var flag = false;
$(”button”).click(function(){
if(flag){
$(”p”).text(”true”);
flag=false;
}else{
$(”p”).text(”false”);
flag=true;
}
});
})
改用data()方式后，代码如下：
$(function(){
$(”button”).click(function(){
if( $(”p”).data(”flag”) ){
$(”p”).text(”true”);
$(”p”).data(”flag”,false);
}else{
$(”p”).text(”false”);
$(”p”).data(”flag”,true);
}
});
})
