将jquery对象缓存起来在
for循环中，不要每次都要访问数组的length属性，我们应该先将对象缓存进一个变量然后再操作，如下所示：
var
for
// 要做的事
}
在循环外使用append(var i = 0; i < myLength; i++) {myLength = myArray.length;
进行DOM这层保护是适用于jQuery UI widget，因为即使操作的元素为空其开销也不少。
定义变量
变量可以定义一个声明而不是几个
}
// 老套写法
var
var
};
var
// 新
var
test2 =
},
test3 = 在自动执行的函数，变量的定义可以完全省掉。(
})(1
条件判断
// 旧方法
if
}
// 好方法
if
}
// 查找对象
if
foo:
bar:
})[type]) {...11,(({(/^(foo|bar)$/.test(type)) {...(type == 'foo' || type == 'bar') {..., 2);function(foo, bar) {...test2(test);function() {...test = 1,test3 = test2(test);test2 = function() {...test = 1;操作是有代价的，如果需要往DOM中添加大量元素，你应该一次批量完成，而不是一次一个。
// 别这样
$.
var
$(
});
//较好的做法
var
$.
var
frag.
});
$(不要在each()里用$(的选择器，会有多次遍历查找dom元素，效率极低用document.来减少页面的DOM结构改变的次数、刷新的次数
// 或者这样
var
$.
html +=
});
$(
保持简洁风格
// 不理想
if
$ventfade.
}
if
$venthover.
}
if
$spans.
}
// 较好的
var
$.
if
v
}
})
慎用匿名函数
匿名函数的约束到处都是一种痛苦。他们难以调试，维护，测试或重用。相反，我们可以使用对象封装，将那些处理和回调函数组织并通过命名管理起来。
// 不要这样
$(
$(
$(
});
});
$(
})
});
// 较好的
var
onReady:
$(
$(
},
candyMtn:
$(
},
slideCb:
},
unicornCb:
}
}
$(
优化选择器DOM
节点选择和操作, 根据给定的ID匹配一个元素总是使用#id去寻找element
// 非常快
$(
// 超级快
$(使用$.方法更快一些，因为第一个选择器是无须经过选择器引擎处理，在jquery中最快的选择器是ID选择器.因为它直接来自于Javascript的getElementById()方法，这是非常快，因为它是原产于浏览器。如果你需要选择多个元素，这必然会涉及到DOM遍历和循环，为了提高性能，建议从最近的ID开始继承。
具体指定选择器的右侧部分应该尽可能具体，左侧则不需要那么具体。
// 未优化
$(
// 优化后
$(如果可以，尽量在选择器靠右侧的部分使用tag.，而左侧只有tag或者只有.。
避免过度的具体
$(
// 不写中间的会更好
$(清爽的DOM结构也有助于改善选择器的性能，选择器引擎可以少跑几层去寻觅那个元素了。
避免使用无定向通配符选择器
$(// 极慢
$(// 快很多
$(// 无定向搜索
$(// 同上
$(// 这样好很多
使用事件委派
事件委派允许你为一个容器元素（例如，一个无序列表）绑定一个事件处理程序，而不需给容器内每个元素（例如，列表项）都去绑定。jQuery提供$.和$.。如果可能的话，你应该使用$.而不是$.，因为它省去了不必要的选择需要，其明确的情况下（对$.的文档的上下文），减少了大约80 % 的开销。除了有性能提升的好处，事件委派也使你在往容器里添加新元素时无需重新绑定事件，因为已经有了。
通过事件委派一次绑定多种事件，以减少事件冗余
// 不好的 (如果列表里面元素很多)
$(
// 较好的: event delegation with $.fn.live
$(
// 最优的: $.fn.delegate
$(
移除元素
DOM操作是慢的，你应该尽量避免去操作它。jQuery在1.版引入了
$.从DOM中去掉所有匹配的元素。
var
var
$table.
// ... 添加大量的行到表格中
$parent.
.detach()和.一样, 除了.保存所有jQuery数据和被移走的元素相关联。当需要移走一个元素，不久又将该元素插入DOM时，这种方法很有用。
当大量元素修改CSS，应该使用样式表
如果你在用$.给多于20个元素修改CSS，考虑一下添加一个style标签，这样可以速度可以提升60 % 。
// 多于20个明显慢
$(
$(
使用$.而不是$.将$.应用于DOM元素比直接调用jQuery选择结果的$.要快上10倍.虽然，这要先确定你是理解DOM元素与jQuery选择结果之间的区别的。
// 常用
$(
// 快十倍
$.
别费时间在空白的选择结果上了
jQuery将不会告诉你，如果你想运行的代码在一个空选择上，它会继续运行，好像没有什么错。影响性能。
//太遭了，执行了三个方法后才意识到里面是空的
$(
// 较好
var
if
mySelection.
}
// 最佳: add a doOnce plugin
jQuery.
this
return
}
$(
// make it ajax! \o/
});'li.cartitems').doOnce(function() {this;.length && func.apply(this);fn.doOnce = function(func) {slideUp();($mySelection.length) {$mySelection = $('#nosuchthing');'#nosuchthing').slideUp();data(elem, key, value);elem).data(key, value);fn.datadatafn.datadata'<style type="text/css">a.swedberg { color : #asd123 }</style>').appendTo('head');'a.swedberg').css('color', '#asd123');fn.cssdetach()remove()append(table);detach();$parent = table.parent();$table = $('#myTable');fn.detach4'#myList').delegate('li.trigger', 'click', handlerFn);'li.trigger').live('click', handlerFn);'li.trigger').click(handlerFn);fn.livefn.livefn.delegatefn.delegatefn.live'.gender input:radio'); '.gender *:radio'); '.gender :radio'); '.buttons').children(); '.buttons > *'); '.data td.gonzalez');'.data table.attendees td.gonzalez');classclass'.data td.gonzalez');'div.data .gonzalez');fn.find'#container').find('div.robotarm');'#container div.robotarm');document).ready(PI.onReady);function() {...function() {...'#yayeffects').slideUp(PI.slideCb);function(e) {'#happiness').load(url + ' #unicorns', PI.unicornCb);'#magic').click(PI.candyMtn);function() {...PI = {'#happiness').load(url + ' #unicorns', function() {...'#yayeffects').slideUp(function() {...'#magic').click(function(e) {document).ready(function() {....stop();(v.data('currently') != 'showing') {each(elems, function(k, v) {elems = [$ventfade, $venthover, $spans];stop();($spans.data('currently') != 'showing') {stop();($venthover.data('currently') != 'showing') {stop();($ventfade.data('currently') != 'showing') {'#ballers').html(myHtml);'<li>' + item + '</li>';each(myArray, function(i, item) {myHtml = '';createDocumentFragment()'#id')'#ballers')[0].appendChild(frag);appendChild(newLI[0]);newLI = '<li>' + item + '</li>';each(reallyLongArray, function(count, item) {frag = document.createDocumentFragment();'#ballers').append(newLI);newLI = '<li>' + item + '</li>';each(reallyLongArray, function(count, item) {