《锋利的jquery》之——jquery性能优化

　　转自《锋利的jquery》第十一章，电子书及源码  http://www.cnblogs.com/akou/p/4461557.html.

 一，性能优化

　1，使用追新版本的jquery类库

　    jquery每一个新的版本都会较上一个版本进行bug修复和优化，同时也包含一些创新，所以建议使用最新版本的jquery来提高性能。不过需要注意的是，更换版本之后，不要忘记测试代码，有的时候不是完全向后兼容。（write less do more！）

   2，使用合适的选择器

　　使用id来定位DOM元素是最佳提高性能的方式，因为jquery底层将直接调用本地方法document.getElementById()。如果不能直接找到需要的元素，可以考虑使用find()方法，为了提高性能建议从最近的id开始往下搜索，性能第二优的是标签选择器，标签选择器直接调用本地方法document.getElementByClassName()，往后依次是class选择器，和属性选择器。

   3，缓存对象

　　在书写jquery代码中，经常用如下书写方式：

$("#traffic_light input.on").bind("click",function(){...});
$("#traffic_light input.on").css("border","1px solod #fff");
$("#traffic_light input.on").css("background","#fff");
$("#traffic_light input.on").fadeIn("slow");

　　这样的结果导致jquery会在创建每一个选择器的过程中。查找dom，创建多个jquery对象，比较好的书写方式如下，尽量不要让相同的选择器在代码中多次出现。

var $active_light = $("#traffic_light input.on");//缓存变量
$("#traffic_light input.on").bind("click",function(){...});
$("#traffic_light input.on").css("border","1px solod #fff");
$("#traffic_light input.on").css("background","#fff");
$("#traffic_light input.on").fadeIn("slow");

  4，循环时的DOM操作

　　使用jquery可以方便添加，删除或修改DOM节点，但是在一些循环中需要注意：

var top_100_list = [...]   //假设这里是100个独一无二的字符串
$myist = $("#mylist");  //jquery选择到<ul>元素
 for（var i=0,l = top_100_list.length;i<l;i++）{
     $mylist>append("<li>" + top_100_list[i]+"</li>");
   }

　　以上代码中，我们将每一个添加的标签元素都作为一个节点添加容器ID中，实际上jquery操作消耗的性能也不低，所以更好的方式是尽可能减少DOM操作，这里应该将整个元素字符串在插入DOM前全部创建好，修改代码如下：

var top_100_list = [...],$mylist = $("#mylist"),
top_100_li = "";   // 这个变量将用来存储我们的列表元素
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);

  5，数组方式使用jquery对象

　　使用jquery选择器获取的结果是一个jquery对象。然而，jquery类库会让你感觉你正在使用一个定义了索引和长度的数组。在性能方面，建议使用简单的for或者while循环来处理，而不是$.each(),这样使代码更快。　　

 $each(array.function(i)){
     array[i] = i;
 }
//使用for代替each()方法，代码如下：
var array = new  Array();
for(var i=0;i<array.length;i++){
     array[i] = i;
}

  6，事件代理

     每一个JavaScript事件（click，mouseover）都会冒泡到父级节点。当我们给多个元素调用同个函数时这点会很有用。比如，我们要为一个表格绑定这样的行为：点击td后，把背景设置为红色，代码如下：

 $("#myTable td").click(function(){
          $(this).css('background','red');
});

　　假设有100个td元素，在使用上方式的时候，你绑定了100个事件，这将带来很负面的影像。有什么更好的方式呢？ 代替这种多元素事件监听的方法就是，你只需向它们的父节点绑定一次事件，通过event.target 获取到点击的当前元素，代码如下

$('#myTable').click(function(e){
          var $clicked = $(e.target);   //e.target 捕捉到出发的目标元素
          $clicked.css('background','red');
})

　　     在改进的方式中，只为一个元素绑定了一个事件。很显然这种方式性能方面要优于之前那种，也可以用on(),帮助你将整个事件监听封装到一个便利的方法中。

 $('#myTable').on()('click','td'.function(){
          $(this).css('background','red');
});

  7，将代码转化成jquery插件

　　如果每次都需要花时间去开发类似的jquery代码，那么你可以考虑将代码变成插件。

  8，使用join来拼接字符串

      使用join来拼接比使用“+”来拼接性能要好。

  9，合理利用HTML5的Date属性

  　HTML5的data属性可以帮助我们插入数据，特别是后端的数据交换。jquery的data()方法，有效的利用HTML5的属性，来自动得到数据。

    　　  <div id = "dl" data-role = "page" data-last-value = "43" data-options = '{"name":"john"}'></div>

　　为了读取数据，需要使用如下代码：

　　　　$("dl").data("role");  // "page"

　　　　$("dl").data("lastValue");  // 43

　　　　$("dl").data("options").name;   // "John";

  10，尽量使用原生的javascript方法

 

  11，压缩javascript