提高jQuery性能的通用规范

缓存变量

总所周知DOM的遍历是很昂贵的，所以要学会使用元素的缓存。

//糟糕

 w =$("elem").width();

 h =$("elem").height();

 //优质

 $elem = $("elem");

 w =$elem.width();

 h =$elem.height();

避免全局变量.

在函数体内初次给变量赋值时，加上var 关键字，因为在函数体内定义新变量，而不加var关键字，这个变量就是全局性的（严格来说是全局对象的属性，如window. variable ），全局变量时存在程序加载时就存在内存中的。

//糟糕

function aa(){

 $elem = $("#elem");

 w =$elem.width();

}

//优质

function aa(){

var $elem = $("#elem");

var h = $elem.width();

}

对象命名加$,便于区别是javascript原生代码还是jQuery代码

//糟糕

var elem = $("#elem");

//优质

var $elem = $("#elem");

将多条var语句合并为一条

//糟糕

var width = 0;

var height;

var $elem;

//优质

var $elem ,height,width = 0;

使用on来替代bind,live,delegate，因为on是1.7后，针对前几种绑定事件方式的性能优化。

bind()

$( "#members li a" ).bind("click", function( e ) {} );

优点：bind的兼容性比较好，而且当事件发生时，handler可以被立即执行。

缺点：它会绑定所有的所选元素上，当元素很多时，效率会是个大问题；页面加载结束后才可以进行bind，就是说对动态添加的元素不可用。

Live已经被明确表示淘汰了，固不再分析

Delegate：为元素的子元素绑定事件

$(document).ready(function(){

 $("div").delegate("button","click",function(){

   $("p").slideToggle();

  });

});

<divstyle="background-color:red">

<p>这是一个段落。</p>

<button>请点击这里</button>

</div>

优点：可以选择触发事件的元素，当你把事件绑定在ul上时，其下面的所有li元素都可以获得绑定的事件；当你在table元素上绑定时，其下以创建的，未创建的元素都可以获得绑定的事件。

缺点：查找你指定的元素，比较费时。

On：是官方推荐的方法，继承了以上几种方式的优点，摒弃了缺点。

属性的链式操作

节约代码本身就是提高性能的一种方式，用户在加载javascript文件时，文件的大小直接影响带宽。

少用if逻辑

用短路的逻辑方式来替代if逻辑，

//糟糕

function loop(renerfn){

if(renerfn){

   fn= renerfn;

}

else {

  fn= fn;

}

}

//优质

function loop(renderfn){

 fn =renderfn ? renderfn : fn;

}

繁重的操作中分离元素，缓存父元素，减少DOM查找

//糟糕

var ul = $("ul"),li = $("ulli");

//优质

var ul = $("ul"),li =ul.find("li");

慎重使用通用选择符

利用CDN

Goole的CDN能保证选择离用户最近的缓存并迅速响应。