编写更好的jQuery代码
讨论jQuery和Javascript性能的文章有不少。不过在这里我仍是要总结一下jQuery的提速策略，还有我本身的一些建议，但愿这些建议能帮助你写出更好的jQuery和JavaScript代码。更好的代码意味着更快的应用和无垃圾的网站。更快的渲染和响应意味着更好的用户体验。javascript
首先，别忘了jQuery 是 JavaScript。这意味着咱们应该使用相同的代码约定，风格指南和最佳实践。css
若是你是JavaScript新手，我建议你在尝试jQuery以前先阅读给新手的JavaScript最佳实践，还有这篇编写优质JavaScript代码。html
当你准备使用jQuery的时候，我强烈建议你遵照下面的指导。java
变量缓存
遍历DOM是很昂贵的，因此须要重用的元素要缓存起来。jquery
// 很差
h = $('#element').height();
$('#element').css('height',h-20);
// 好
$element = $('#element');
h = $element.height();
$element.css('height',h-20);
避免全局变量
和通常的JavaScript同样，jQuery下也最好把你的变量的做用域限制在函数以内。git
// 很差
$element = $('#element');
h = $element.height();
$element.css('height',h-20);
// 好
var $element = $('#element');
var h = $element.height();
$element.css('height',h-20);
使用匈牙利标记
在包含jQuery对象的变量前加上美圆符号，易于识别。github
// 很差
var first = $('#first');
var second = $('#second');
var value = $first.val();
// 好一点 - 咱们在jQuery对象前加上了 $ 符号
var $first = $('#first');
var $second = $('#second'),
var value = $first.val();
单一Var模式
能够将多个Var语句合并为一个。我建议将未赋值的变量放在最后。ajax
var
$first = $('#first'),
$second = $('#second'),
value = $first.val(),
k = 3,
cookiestring = 'SOMECOOKIESPLEASE',
i,
j,
myArray = {};
使用On
新版的jQuery支持click()之类的写法，将其做为on('click')的简写形式。然而在早先的版本中，click()却表示bind()。jQuery 1.7倾向于将on()用于附加事件处理。然而为了保持一致，你能够在全部的地方都使用on()。segmentfault
// 很差
$first.click(function(){
$first.css('border','1px solid red');
$first.css('color','blue');
});
$first.hover(function(){
$first.css('border','1px solid red');
})
// 好一些
$first.on('click',function(){
$first.css('border','1px solid red');
$first.css('color','blue');
})
$first.on('hover',function(){
$first.css('border','1px solid red');
})
精炼JavaScript
通常倾向于尽量地组合函数：api
// 很差
$first.click(function(){
$first.css('border','1px solid red');
$first.css('color','blue');
});
// 好一些
$first.on('click',function(){
$first.css({
'border':'1px solid red',
'color':'blue'
});
});
使用连锁
jQuery下连锁使用函数很容易，要好好利用这一特性让代码更精炼。
// 很差
$second.html(value);
$second.on('click',function(){
alert('hello everybody');
});
$second.fadeIn('slow');
$second.animate({height:'120px'},500);
// 好一些
$second.html(value);
$second.on('click',function(){
alert('hello everybody');
}).fadeIn('slow').animate({height:'120px'},500);
保持可读性
过于追求简短，滥用连锁，代码会所以变得不可读。尝试使用缩进和换行来保持可读性。
// 很差
$second.html(value);
$second.on('click',function(){
alert('hello everybody');
}).fadeIn('slow').animate({height:'120px'},500);
// 更好
$second.html(value);
$second
.on('click',function(){ alert('hello everybody');})
.fadeIn('slow')
.animate({height:'120px'},500);
善用短路
使用&&和||运算符。
// 很差
function initVar($myVar) {
if(!$myVar) {
$myVar = $('#selector');
}
}
// 更好
function initVar($myVar) {
$myVar = $myVar || $('#selector');
}
优先使用简写形式
这也是精炼代码的好方法
// 很差
if(collection.length > 0){..}
// 更好
if(collection.length){..}
大量操做时分离元素
若是要对DOM元素进行大量操做，建议先分离出来，过后从新添加。
// 很差
var
$container = $("#container"),
$containerLi = $("#container li"),
$element = null;
$element = $containerLi.first();
//... a lot of complicated things
// 更好
var
$container = $("#container"),
$containerLi = $container.find("li"),
$element = null;
$element = $containerLi.first().detach();
//...a lot of complicated things
$container.append($element);
学习窍门
当你使用不熟悉的jQuery方法时，必定要看看文档，可能有更好更快的方法。
// 很差
$('#id').data(key,value);
// 更好 （更快）
$.data('#id',key,value);
缓存父元素
前面已经提到了，遍历DOM是很是昂贵的。通常而言，最好将父元素缓存起来，这样选定子元素的时候能够重复使用。
// 很差
var
$container = $('#container'),
$containerLi = $('#container li'),
$containerLiSpan = $('#container li span');
// 更好 (更快)
var
$container = $('#container '),
$containerLi = $container.find('li'),
$containerLiSpan= $containerLi.find('span');
避免使用通用选择符
当与其余selector组合使用时，universal selector极度缓慢。
// 很差
$('.container > *');
// 好一些
$('.container').children();
避免隐式通用选择符
隐式通用选择符一样要避免。
// 很差
$('.someclass :radio');
// 更好
$('.someclass input:radio');
优化选择符
例如，使用ID就已经足够，没必要再多此一举。
// 很差
$('div#myid');
$('div#footer a.myLink');
// 更好
$('#myid');
$('#footer .myLink');
不要descend多个ID
ID已经足够选定元素了，因此没有必要使用后代选择符。
// 很差
$('#outer #inner');
// 更好
$('#inner');
尽可能使用最新版
最新一般意味着最好：有时更轻量，有时更快速。显然，你须要考虑代码兼容性。例如，别忘了2.0起jQuery不支持IE 6/7/8了。
不要使用废弃的方法
重要的是老是关注每次升级时废弃的方法，尽可能避免使用它们。
// 很差 - live已废弃
$('#stuff').live('click', function() {
console.log('hooray');
});
// 更好
$('#stuff').on('click', function() {
console.log('hooray');
});
从CDN加载jQuery代码
Google CDN从离用户最近的缓存提供代码。只需使用此url便可享受Google CDN的好处：http://code.jquery.com/jQuery-latest.min.js
有必要的时候混合原生JavaSCript代码
正如我前面说的，jQuery是JavaScript，这就意味着咱们能够在jQuery下作原生JavaScript下能够作的事。编写原生（原味）JavaScript代码有时意味着可读性和可维护性的降低，文件变长，可是这也意味着更快的代码。牢记没有一个框架能够比原生JavaScript操做更小、更轻、更快。（点击图片可运行测试。）
http://blog.mathewdesign.com/wp-content/uploads/2013/10/jq.png
http://jsperf.com/jQuery-vs-JavaScript-performance-comparison
因为原生JavaScript和jQuery的性能差别，我强烈建议明智地混合二者，状况容许的时候使用jQuery函数的原生替代品。
最后的考虑
最后，我推荐提升jQuery性能一文，它包括了其余一些良好实践。若是你打算深刻的话，你会以为它们颇有意思。
牢记使用jQuery不是必需的，它只是一个选择。想一想为何你使用它。操做DOM？Ajax？模板？CSS动画？选择符引擎？有时候，也许值得考虑使用一个JavaScript微框架，或者使用适合你需求的jQuery定制构建。