议论jQuery和Javascript机能的文章有许多。不过在这里我照样要总结一下jQuery的提速战略，另有我本身的一些发起，愿望这些发起能协助你写出更好的jQuery和JavaScript代码。更好的代码意味着更快的运用和无渣滓的网站。更快的衬着和相应意味着更好的用户体验。
起首，别忘了jQuery 是 JavaScript。这意味着我们应当运用雷同的代码商定，作风指南和最好实践。
假如你是JavaScript新手，我发起你在尝试jQuery之前先浏览给新手的JavaScript最好实践，另有这篇编写优良JavaScript代码。
当你预备运用jQuery的时刻，我强烈发起你恪守下面的指点。
变量缓存
遍历DOM是很高贵的，所以须要重用的元素要缓存起来。
// 不好
h = $('#element').height();
$('#element').css('height',h-20);
// 好
$element = $('#element');
h = $element.height();
$element.css('height',h-20);
防止全局变量
和平常的JavaScript一样，jQuery下也最好把你的变量的作用域限定在函数以内。
// 不好
$element = $('#element');
h = $element.height();
$element.css('height',h-20);
// 好
var $element = $('#element');
var h = $element.height();
$element.css('height',h-20);
运用匈牙利标记
在包含jQuery对象的变量前加上美圆标记，易于辨认。
// 不好
var first = $('#first');
var second = $('#second');
var value = $first.val();
// 好一点 - 我们在jQuery对象前加上了 $ 标记
var $first = $('#first');
var $second = $('#second'),
var value = $first.val();
单一Var情势
能够将多个Var语句合并为一个。我发起将未赋值的变量放在末了。
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()。
// 不好
$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
平常倾向于只管地组合函数：
// 不好
$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定制构建。
