Note 1 ： JQuery 性能优化

Note 1 ： JQuery 性能优化

 一、合适的选择器
     JQuery 选择器提供丰富的选择器来定位DOM元素，
     基本选择器
     #id、.class、element、*等；那他们哪个更高效呢？
     第一选择：
     $("#id")
     第二选择：
     $("p"),$("div")
     第三选择(选择性使用) ：
     $(".class") 
     第四选择
     $("[attribute =value"])
     第五选择(伪选择器，其属于 JQuery 过滤选择器中的可见性过滤选择器)
     $(":hidden")  

     PS：1、尽量选择Id选择器，
             2、给选择器指定上下文
    其类似于CSS选择器，CSS选择器中三大特性 --特殊性、继承、层叠中的特殊性：
            1、对于选择器给定的各个ID属性值（#id）：加上  0,1,0,0
            2、对于选择器给定的各个类属性值（.class、属性选择、伪类如:visited、:link ) :  加上0,0,1,0
            3、对于选择器给定的各个元素（element）: 加上0,0,0,1
   例子：html >body table tr[td="totals"] td ul > li 则为0，0，0，7+ 0，0，1，0 =  0，0，1，7；
              li #answer 则为0，0，0，1 + 0，1，0，0 = 0，1，0，1 
   根据这种运算可以得出胜出规则：
   比如：0，1，0，1 大于 0，0，1，7 ，则其特殊性越高。选择的优先级越高。
   * 属于通配选择器，其是 0 特殊性


二、数组方式使用JQuery对象
 在性能方面，建议使用for 或者 while 来处理，而不是$.each()
 如：
 $.each(array ,function (i)) {
   array[i] = i ;
  }
 改为：
  var array = new Array ();
  for (var i = 0 ;i< array.length ;i++) {
  array[i] = i;
}


三、事件代理
 例子： 单击单元格，单元格变色
 $('#table td").click(function()) {
    $(this).css("backgroud","blue") ;
 }
如果表格有100个td单元格，那么就绑定了100个事件，性能会很差。
可以使用事件代理：
   $('#table").click(function(e)) {
   var $clicked = $(e.target); // e.target 得到触发的目标元素
    $clicked.css("backgroud","blue") ;
 }
  其只绑定一个事件，性能提高

四、join 拼接字符串
将数组转换为字符串
一般在长字符串时，这个性能提升才会明显
 var array = [] ;
 for(var i = 0 ; i< 100; i++){
  array[i] = '<li>'+i+'</li>';
}
$("#list").html(array.join(' '));
可以联系Java中StringUtils 的Join()， 以及StringBulider，StringBuffer的用法比较使用。
 
五、使用原生的JS方法
常用判断一个多选框是否选中：
 var $ck = $("#ck");
 $ck.click(function()) {
 if($ck.is(":checked")) {
   alert("checked");
}
})
改为：
 var $ck = $("#ck");
 var  ck = $ck.get(0); // JQuery 对象转化为DOM对象，其有2种方式 JQuert.get(0)或者JQuery[0]
 $ck.click(function()) {
 if(ck.checked)) {
   alert("checked");
}
})

六、尽量使用JQuery优雅的链式操作
其可以减少对象的随意创建，也可以创建一个对象到全局环境，让其他函数function调用。