jQuery 代码编写优化

jQuery是Web前端中应用最广泛之一，但 在书写  jquery  的时候，为了书写代码方便，往往忽略了程序执行过程中，给客户端带来的压力。随之而来的就是在某些低端浏览器或者低端电脑上运行速度缓慢，甚至无法运行等问题。

     因此有必要对自己书写的  jquery  代码进行优化，以达到更快捷、更流畅的运行效果。

1   ，总是从   ID   选择器开始继承   
在  jQuery  中最快的选择器是  ID  选择器，因为它直接来自于  JavaScript  的  getElementById()  方法。   
例如有一段  HTML  代码：

如果采用下面的选择器，那么效率是低效的。   
var traffic_button = $(“#content .button”); 

因为  button  已经有  ID  了，我们可以直接使用  ID  选择器。如下所示：   
var traffic_button = $(“#traffic_button”);  
当然   这只是对于单一的元素来讲。如果你需要选择多个元素，这必然会涉及到  DOM  遍历和循环，   
为了提高性能，建议从最近的  ID  开始继承。   
如下所示：   
var traffic_lights = $(“#traffic_light input”); 

 

2 、请使用一个 var 来定义变量   
如果你使用多个变量的话，请如下方式定义：

.  代码如下 :

Var page = 0, 

    $myid = “”,

    $loading = $('#loading'), 

     $body = $('body');

不要给每一个变量都添加一个 var 关键字

 

3 、使用链式操作  

       $('#loading') .html(' 完毕 ');

       $('#loading') . attr('class', 'blues')

       $('#loading') . fadeOut();

 

上面例子，可以写的更简洁一些：

 $('#loading').html(' 完毕 ').attr('class', 'blues').fadeOut();

 

 

4 、精简 jQuery 代码   
尽量把一些代码都整合到一起，请勿这样编码：

$button.click(function(){  
    $target.css('width','50%');  
    $target.css('border','1px solid #202020');  
    $target.css('color','#fff');  
});

这样书写性能更好：

$button.click(function(){  
    $target.css({'width':'50%','border':'1px solid#202020','color':'#fff'});  
});

 

5 、多用逻辑判断 || 或者 && 来提速  

如下书写：

if(!$something) {  
    $something = $('#something ');  
}

这样书写性能更好：

$something = $something || $('#something');

 

6  ，将  jQuery  对象缓存起来   
（1）把  jQuery  对象缓存起来   就是要告诉我们   要养成将  jQuery  对象缓存进变量的习惯。   
如下代码：

    $("#traffic_light input.on").bind("click", function(){  });

    $("#traffic_light input.on").css("border", "1px dashed yellow");

    $("#traffic_light input.on").css("background-color", "orange");

    $("#traffic_light input.on").fadeIn("slow");

 

这样书写性能更好：

    var $active_light = $("#traffic_light input.on");

    $active_light.bind("click", function(){  });

    $active_light.css("border", "1px dashed yellow");

    $active_light.css("background-color", "orange");

    $active_light.fadeIn("slow");

记住，永远不要让相同的选择器在你的代码里出现多次  .  

（2）   如果打算在其他函数中使用  jQuery  对象，那必须把它们缓存到全局环境中。  

      在全局范围定义一个对象  (  例如  : window  对象  )

    window.$my = {

         head : $("head"),

         traffic_light : $("#traffic_light"),

         traffic_button : $("#traffic_button")

    };

     

引用存储的结果并操作它们

    function do_something(){

          var script = document.createElement("script");

         $my.head.append(script);

    //  当你在函数内部操作是  ,  可以继续将查询存入全局对象中去  .

         $my.cool_results = $("#some_ul li");

         $my.other_results = $("#some_table td");

     // 将全局函数作为一个普通的  jquery  对象去使用  . 也可以在其他函数中   使用它

         $my.other_results.css("border-color", "red");

         $my.traffic_light.css("border-color", "green");

    }

 

7  ，推迟到  $(window).load

jQuery  对于开发者来说有一个很诱人的东西  ,  可以把任何东西挂到  $(document).ready  下。   
尽管  $(document).rady  确实很有用，   它可以在页面渲染时，其它元素还没下载完成就执行。   
如果你发现你的页面一直是载入中的状态，很有可能就是  $(document).ready  函数引起的。   
你可以通过将  jQuery  函数绑定到  $(window).load  事件的方法来减少页面载入时的  cpu  使用率。   
它会在所有的  html(  包括  iframe)  被下载完成后执行。   
一些特效的功能，例如拖放  ,  视觉特效和动画  ,  预载入隐藏图像等等，都是适合这种技术的场合。

8  ，给选择器一个上下文

jQuery  选择器中有一个这样的选择器，它能指定上下文。   
jQuery( expression, context );  
通过它，能缩小选择器在  DOM  中搜索的范围，达到节省时间，提高效率。  

在文档的第一个表单中，查找所有的单选按钮（即： type 值为 radio 的 input 元素）。

普通方式：   
    $(' input:radio ') ;

改进方式：   
     $("input:radio", document.forms[0]);  

$( expression,  context );

     expression(String): 用来查找的字符串

     context(Element, jQuery):( 可选 ) 作为带查找的 DOM 元素集、文档或 jQuery 对象。

  最后 ， jQuery虽然好用，但是不要忘了它也是Javascript写的一个框架。所以在写jQuery代码时，能用原生JS写量，就尽量用原生的写，这样能获得更好的性能。