《锋利的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