jquery代码性能优化

测试代码：

<script>  
  console.profile() ;  
  // Our code here  
  console.profileEnd();  
</script>

1. 检测元素是否存在

避免对当前页面上不存在的元素执行操作

var ele = $("#somethingThatisNotHere");  
if ( ele[0] ) {  
   ele.text("Some text").slideUp(300).addClass("editing");  
}

2. 使用id取代class

使用高效的选择器，jQuery是使用JavaScript自身的getElementById方法来按照id查找元素。而当使用class选择器来查找元素时，jQuery是使用自身的方法来获取元素（至少在部分老的浏览器中是如此）。

我们将使用不同的选择器来寻找第二个li元素。然后我们对每种选择器进行测试，看看他们在性能上的差异。第一种办法，也是最简单的，我们直接使用selected class来指向元素，然后我们看看Firebug profiler返回的结果。

console.profile() ;  
$(".selected");  
console.profileEnd();

返回的结果是0.30毫秒。接下来我们添加一个标签名，来缩小范围。这次我们通过使用document.getElementsByTagName来指定selected的DOM元素，以此缩小查找范围。

console.profile() ;  
$("li.selected");  
 console.profileEnd();

成绩是 0.291毫秒，减少了0.02毫秒。因为我们是在Firefox中测试的，这里的提高有点微不足道，但是它在老的浏览器中所带来的性能提供却是显著的，像IE6浏览器。

接下来，我们从他的父元素的ID开始查找：

console.profile() ;  
$("#someList .selected");  
console.profileEnd();

成绩是:0.283毫秒。现在让我们声明更具详细点，我们在祖先元素ID后面指定元素类型。

console.profile() ;  
$("#someList li.selected");  
console.profileEnd();

成绩是：0.275毫秒。又减少了一点时间。最后让我们直接通过ID来指向元素：

console.profile() ;  
$("#mainItem");  
console.profileEnd();

成绩是：0.165毫秒。提高惊人！这个测试向你展示了使用JS自带方法的执行速度有多快。注意虽然许多新型的浏览器可以享受getElementsByClassName带来的好处，但是老的浏览器不行——这回会导致代码效率急剧下降。所以在写代码的时候，牢记这点。

3、避免查询浪费

$("#mainItem").hide().val("Hello").html("Oh, hey there!").show();

待补充....