- JQ 优化(一)
- 选择器优化
(一) $("#id")直接调用底层 document.getElementById();方法 如果这样无法找到你的元素,可以使用$("#id").find("div"),来精确查找到所需要的元素,这种直接根据ID选择器来找寻元素,性能最佳
(二)如果id选择器无法满足需求,用标签选择器查询也是不错的$("p"),$("div")....性能优化的第二选择;他直接调用document.getElementByTagName()来定位DOM 元素;
(三)使用类选择器.class这种有些复杂,相比较老版本IE8以前(包括IE8)只能靠DOM 搜索方式,无疑来说有较大影响.所以建议避开$(".class")这种,可能对性能产生很大影响的方式
(四)使用$("[attribute=value]"),$("input name["datepickter"]"), 虽然现大多浏览器已经支持querySelectorAll()方法,但是用这种方法来定位DOM,性能不是很理想
(五)使用$(":hidden")伪选择器来收索时,最好先确定一个父元素,先确定一个范围,负责很慢~如$("#content").find(":hidden");
....综上所诉,性能由上到下
2 . 使用缓存对象优化JQ
通常情况下我们查找DOM会写成
$("button[name=‘setIPInf‘]").bind("click", function (e) {...});
$("button[name=‘setIPInf‘]").css("background","red");
$("button[name=‘setIPInf‘]").fadeIn("slow");
这种情况,代码写的非常正确,但是JQ在每次执行一行代码的时候 都会产生一个DOM,创建多个JQ对象;建议以下写法
var $setIPInf=$("button[name=‘setIPInf‘]")
$setIPInf.bind("click", function (e) {...});
$setIPInf.css("background","red");
$setIPInf.fadeIn("slow");
再优化:
var $setIPInf=$("button[name=‘setIPInf‘]")
$setIPInf.bind("click", function (e) {...})
.css("background":"red"})
.fadeIn("slow");
减少DOM产生,可以大量优化JQ代码;
3.循环时的DOM操作;
特别在UL TR 这些需要循环的地方,代码不当,对JQ 性能影响很大;
例子:
var top_100_list=[....]; //假设创建一个100独一无二元素,字符串
$mylist=$("maylist"); //JQ选择到<ul>标签;
for(var i=0;i<top_100_list.length;i++){
$mylist.append("<li>"+top_100_list[i]+"</li>")
};
新修改后
var top_100_list=[....];
$mylist=$("maylist");
top_100_li="";
for(var i=0;i<top_100_list.length;i++){
top_100_li+="<li>"+top_100_list[i]+"</li>"
};
$mylist.html(top_100_li);
千万别写成
for(var i=0;i<100;i++){
var $mylist=$("maylist");
$mylist.append("<li>"+top_100_list[i]+"</li>")
};
4.在使用JQ数组的时候;
很多人在使用JQ数组的时候,都喜欢用$.each();单单从性能上来讲并没有简单的for和while语句来的快
$.each(array, function (i) {
array[i]=i;
})
优化后:
var array=new Array();
for(var i=0;i<array.length;i++){
array[i]=i;
}
检查id是否为cotent;
var $content=$("#content");
if($content){...}
if($content.length){...}