本文中用到的jQuery版本为v1.12.0
1. 缓存对象
在写jQuery代码的时候，有些开发人员喜欢这么写：
$('#id').css('color', 'white');
$('#id').on('click', function(event) {...});
$('#id').find('.childNode').siblings().hide();
$('#id').fadeIn('500');
当然，开发过程中的跳跃思维会导致你有可能书写类似这样的代码，这无可厚非，但是这么书写导致的是：jQuery会在创建每一个选择器的过程中，查找DOM，创建多个jQuery对象。相对应的，比较良好的书写方式如下：
var $id = $('#id');
$id.css('color', 'white');
$id.on('click', function(event) {...});
$id.find('.childNode').siblings().hide();
$id.fadeIn('500');
当然，使用jQuery的链式操作会使代码更加简洁：
var $id = $('#id');
$id.css('color', 'white')
.on('click', function(event) {...})
.find('.childNode').siblings().hide()
.fadeIn('500');
这里只是为了说明使用缓存变量的重要性，这和Java开发中不要随意的创建对象一样，可以帮助你有效地提高代码的执行效率。
如果在其他函数也用到了该jQuery对象，那么可以把它缓存到全局环境中。如：
window.$me = {
id1 = $('#id1'),
head = $('#title')
};
function test () {
$me.id1.css('color', 'white')
.on('click', function(event) {...})
.find('.childNode').siblings().hide()
.fadeIn('500');
$me.head.text('I am a Head');
}
切记：永远不要让相同的选择器在你的代码中出现多次。
2. 循环时的DOM操作
使用jQuery可以很方便的对DOM节点进行增删查改，但是在一些循环中，如for()，while()，$.each()中处理节点时，如下例：
$ul = $('#ul-list');
$.each(dataArray, function(index, val) {
$ul.append('<li>'+dataArray[index]+'</li>');
});
在上面代码中，将dataArray中的数据逐个加入到ul中，期间每一条数据都通过.append()将新节点添加到容器中。实际上jQuery操作消耗的性能也不低，所以更好的方式是尽可能的减少DOM操作。可以将整个元素字符串在插入DOM之前全部创建好。如：
var $ul = $('#ul-list');
var html = "";
$.each(dataArray, function(index, val) {
html += '<li>'+dataArray[index]+'</li>';
});
$ul.html(html);
3. 数组方式使用jQuery对象
使用jQuery选择器获取的结果是一个jQuery对象。然而，jQuery类库会让你感觉你在使用一个定义了索引和长度的数组。在性能方面，使用for()或者while()来处理比使用$.each()要快。
同时，检查该数组的长度也是一个检查jQuery对象是否存在的方法。如：
var $content = $('#content');
if ($content) {...};//总是返回true
if ($content.length) {...};//拥有#content该元素时才返回true
4. 事件代理
每一个JavaScript事件（如：click，mouseover等）都会冒泡到父级节点。当我们需要给多个元素调用同个函数时，这点会很有用。比如，我们要唯一个表格绑定这样的行为：点击td后，把背景色设置为红色，代码如下：
$("#myTabel td").click(function(event){
$(this).css('background-color','red');
})
假设有100个td，在使用上述方式的时候，就绑定了100个事件，这将带来很负面的性能影响。
代替这种效率较低的多元素事件监听的方法就是，只需向它们的父节点绑定一次事件，然后通过event.tartget获取点击到的当前元素，代码如下：
$("#myTabel").click(function(event){
var $td = $(event.target);
$td.css('background-color','red');
})
在改进方式中，只为一个元素绑定了一个事件，显然这种方式的性能要优于之前那种。同时，在jQuery 1.7版本中提供了一个新的方式：on()，来帮助你将整个事件监听封装到一个便利的方法中：
$("#myTabel").on('click', 'td', function(event){
$(this).css('background-color','red');
})
5.尽量使用原生的JavaScript方法
下面的代码，用来判断多选框是否选中：
var $cb = $('#checkbox');
$cb.click(function(e){
if($cb.is(':checked')){
alert('你已选中该多选框');
}
});
这里使用了jQuery提供的is()方法来判断多选框是否选中，但这里可以直接使用原生的JavaScript的方法：
var $cb = $('#checkbox');
$cb.click(function(event) {
if (this.checked) {alert('checked')}
});
毋庸置疑，第二种方式效率高于第一种，因为它不需要再去调用其他函数。
还有很多：
//$(this).css('color','red');
this.style.color = 'red';//better;
//$('<p>');
$(document.createElement('p'));//better;
方法的选择很重要，有时候，也许你根本不需要jQuery。
6.压缩JavaScript
现在的web项目总是离不开大量的JavaScript，而js文件的体积越来越大，随之也影响到页面的感知新能。因此，需要对JavaScript文件进行压缩。
压缩的方法和工具在网上很多，大家可以自行搜索。
完。
