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调用。