最近写了很多js。虽然实现了效果，但是总觉得自己写的js性能可以有很大的提升。在本文中，我计划总结一些来自Internet和我自己的建议，以改进您的jQuery和javascript代码。好的代码可以提高速度。快速渲染和响应意味着更好的用户体验。我想用这篇文章提醒自己。首先推荐jQueryAPI文档http://www.css88.com/jqapi-1.9/，她会告诉你在使用jQuery时应该注意哪些问题，性能建议，在什么情况下使用可能有问题；帮助你更好的理解和掌握jQuery。其次，请记住jQuery是javascript。这意味着我们应该采用相同的编码约定、风格指南和最佳实践。当您准备好使用jQuery时，我强烈建议您遵循以下准则：缓存变量DOM遍历是昂贵的，因此请尝试缓存将被重用的元素。//oopsh=$('#element').height();$('#element').css('height',h-20);//建议$element=$('#element');h=$element.height();$element.css('高度',h-20);避免全局变量jQuery和javascript一样，一般来说，确保你的变量在函数范围内。//糟糕$element=$('#element');h=$element.height();$element.css('height',h-20);//建议var$element=$('#element');varh=$element.height();$element.css('高度',h-20);使用匈牙利语表示法在变量前加$前缀，便于识别jQuery对象。//糟糕varfirst=$('#first');varsecond=$('#second');varvalue=$first.val();//建议-在jQuery对象前加上$var$first=$('#first');var$second=$('#second'),varvalue=$first.val();使用Varchain（单Var模式）将多个var语句合并为一个语句，我推荐后面未赋值的变量。var$first=$('#first'),$second=$('#second'),value=$first.val(),k=3,cookiestring='SOMECOOKIESPLEASE',i,j,myArray={};请使用'On'在较新版本的jQuery中，使用更短的on("click")而不是click()等函数。在以前的版本中，on()是bind()。on()方法是自jQuery1.7版以来附加事件处理程序的最佳方式。但是，为了保持一致性，您可以在整个过程中简单地使用on()方法。//糟糕$first.click(function(){$first.css('border','1pxsolidred');$first.css('color','blue');});$first.hover(function(){$first.css('border','1pxsolidred');})//建议$first.on('click',function(){$first.css('border','1pxsolidred');$first.css('color','blue');})$first.on('hover',function(){$first.css('border','1pxsolidred');})缩小的javascript一般来说，***尽可能合并函数。//糟糕$first.click(function(){$first.css('border','1pxsolidred');$first.css('color','blue');});//建议$first.on('click',function(){$first.css({'border':'1pxsolidred','color':'blue'});});链式操作jQuery实现方法的链式操作非常容易。利用下面的这个。//糟糕$second.html(value);$second.on('click',function(){alert('helloeverybody');});$second.fadeIn('slow');$second.animate({height:'120px'},500);//建议$second.html(value);$second.on('click',function(){alert('helloeverybody');}).fadeIn('slow').animate({height:'120px'},500);保持代码的可读性伴随着精简代码和使用链，这可能会使代码难以阅读。添加缩进和换行会非常有效。//糟糕$second.html(value);$second.on('click',function(){alert('helloeverybody');}).fadeIn('slow').animate({height:'120px'},500);//建议$second.html(value);$second.on('click',function(){alert('helloeverybody');}).fadeIn('slow').animate({height:'120px'},500);选择短路评估短路评估是使用&&（逻辑与）或||从左到右评估的表达式（逻辑或）运算符。//错误的functioninitVar($myVar){if(!$myVar){$myVar=$('#selector');}}//建议functioninitVar($myVar){$myVar=$myVar||$('#selector');}选择快捷方式简化代码的一种方法是利用编码快捷方式。//oopsif(collection.length>0){..}//建议if(collection.length){..}在繁重的操作中分离元素如果你打算对DOM元素做大量的操作（设置多个属性在aroworcssstyle），建议先分离元素再添加。//Oopsvar$container=$("#container"),$containerLi=$("#containerli"),$element=null;$element=$containerLi.first();//...很多复杂的操作//bettervar$container=$("#container"),$containerLi=$container.find("li"),$element=null;$element=$containerLi.first().detach();//..许多复杂的操作$container.append($element);记忆技巧你可能对使用jQuery中的方法没有经验，一定要查看文档，可能有更好或更快的使用方法。//oops$('#id').data(key,value);//建议（高效）$.data('#id',key,value);前面提到使用子查询来缓存父元素是的，DOM遍历是一个开销很大的操作。典型的做法是缓存父元素并在选择子元素时重用那些缓存的元素。//错误var$container=$('#container'),$containerLi=$('#containerli'),$containerLiSpan=$('#containerlispan');//建议（有效）var$container=$('#container'),$containerLi=$container.find('li'),$containerLiSpan=$containerLi.find('span');避免通用选择器将通用选择器放在后代选择器中，性能很差。//糟糕$('.container>*');//建议$('.container').children();避免隐式通用选择器通用选择器有时是隐式的并且不容易找到。//糟糕$('.someclass:radio');//建议$('.someclassinput:radio');优化选择器例如，Id选择器应该是唯一的，因此不需要添加额外的选择器。//糟糕$('div#myid');$('div#footera.myLink');//建议$('#myid');$('#footer.myLink');避免多个ID选择器这里强调ID选择器应该是唯一的，不需要添加额外的选择器，更不用说多个后代ID选择器。//糟糕$('#outer#inner');//建议$('#inner');坚持使用***版本较新的版本通常更好：更轻便、更高效。显然，您需要考虑您要支持的代码的兼容性。比如2.0版本不支持ie6/7/8。密切关注每个新版本中已弃用的方法并尽量避免使用它们非常重要。//糟糕-live已弃用$('#stuff').live('click',function(){console.log('hooray');});//建议$('#stuff').on('click',function(){console.log('hooray');});//注意：这个可能不太合适，应该是live可以实现实时绑定，delegate可能更适合用CDNGoogle的CND确保选择缓存离用户最近并快速响应。（请自行使用GoogleCND搜索地址，此处地址不能使用，推荐使用jquery官网提供的CDN）。必要时结合jQuery和javascript本机代码如上所述，jQuery是javascript，这意味着您可以用jQuery做的任何事情，也可以用本机代码来做。本机代码（或vanilla）可能不如jQuery可读和可维护，而且代码更长。但也意味着更高效（通常越接近底层代码的可读性越低，性能就越高，比如：汇编，当然需要更厉害的人）。请记住，没有任何框架可以比本机代码更小、更轻、更高效（注意：测试链接已过期，您可以在线搜索测试代码）。考虑到vanilla和jQuery之间的性能差异，我强烈建议两全其美，并（在可能的情况下）使用jQuery的原生等价物。***建议***，我正在录制这篇文章以提高jQuery性能和其他一些好的建议。如果您想更深入地研究这个主题，您会发现它很有趣。请记住，jQuery不是必需的，它只是一个选项。想想你为什么要使用它。DOM操作？阿贾克斯？模版？CSS动画？还是选择器引擎？也许javascript微框架或自定义版本的jQuery会是更好的选择。虽然都是老生常谈，但我发现我做不到以上所有，希望我都能做到。
