jQuery性能优化的38个建议.docxVIP

jQuery性能优化的38个建议想必大家对于jQuery这个最流行的javascript类库都不陌生，而且只要是前端开发人员肯定或多或少的使用或者接触过，在这篇文章中，参考了一些资料及实际使用效率，将介绍一些书写高质量jQuery代码的原则，不单单会告诉你如何去书写，也会告诉你为什么这样书写，希望大家会觉得有所帮助一、注意定义jQuery变量的时候添加var关键字这个不仅仅是jQuery，所有javascript开发过程中，都需要注意，请一定不要定义成如下：$loading = $(#loading); //这个是全局定义，不知道哪里位置倒霉引用了相同的变量名，就会郁闷至死的二、请使用一个var来定义变量如果你使用多个变量的话，请如下方式定义：复制代码代码如下:var page = 0,$loading = $(#loading),$body = $(body);不要给每一个变量都添加一个var关键字，除非你有严重的强迫症三、定义jQuery变量是添加$符号申明或者定义变量的时候，请记住如果你定义的是jQuery的变量，请添加一个$符号到变量前，如下：复制代码代码如下:var $loading = $(#loading);这里定义成这样的好处在于，你可以有效的提示自己或者其它阅读你代码的用户，这是一个jQuery的变量。四、DOM操作请务必记住缓存（cache）在jQuery代码开发中，我们常常需要操作DOM，DOM操作是非常消耗资源的一个过程，而往往很多人都喜欢这样使用jQuery：复制代码代码如下:$(#loading).html(完毕);$(#loading).fadeOut();代码没有任何问题，你也可以正常运行出结果，但是这里注意你每次定义并且调用$(#loading)的时候，都实际创建了一个新的变量，如果你需要重用的话，记住一定要定义到一个变量里，这样可以有效的缓存变量内容，如下：复制代码代码如下:var $loading = $(#loading);$loading.html(完毕);$loading.fadeOut();这样性能会更好。五、使用链式操作上面那个例子，我们可以写的更简洁一些：复制代码代码如下:var $loading = $(#loading);$loading.html(完毕).fadeOut();六、精简jQuery代码尽量把一些代码都整合到一起，请勿这样编码：复制代码代码如下:// ！！反面人物$button.click(function(){$target.css(width,50%);$target.css(border,1px solid #202020);$target.css(color,#fff);});应该这样书写：复制代码代码如下:$button.click(function(){$target.css({width:50%,border:1px solid #202020,color:#fff});});七、避免使用全局类型的选择器请勿如下方式书写：$(.something *);这样书写更好：$(.something).children();八、不要叠加多个ID请勿如下书写：$(#something #children);这样就够了：$(#children);九、多用逻辑判断||或者来提速请勿如下书写：复制代码代码如下:if(!$something) {$something = $(#something );}这样书写性能更好：复制代码代码如下:$something= $something|| $(#something);十、尽量使用更少的代码与其这样书写：if(string.length 0){..}不如这样书写：if(string.length){..}十一、尽量使用.on方法如果你使用比较新版本的jQuery类库的话，请使用.on，其它任何方法都是最终使用.on来实现的。十二、尽量使用最新版本的jQuery最新版本的jQuery拥有更好的性能，但是最新的版本可能不支持ie6/7/8，所以大家需要自己针对实际情况选择。十三、尽量使用原生的Javascript如果使用原生的Javascript也可以实现jQuery提供的功能的话，推荐使用原生的javascript来实现。十四、总是从#id选择器来继承这是jQuery选择器的一条黄金法则。jQuery选择一个元素最快的方法就是用ID来选择了。复制代码代码如下:$(#content).hide();或者从ID选择器继承来选择多个元素:复制代码代码如下:$(#content p).hide();十五、在class前面使用tagjQuery中第二快的选择器就是tag选择器（如$(‘head)），因为它和直接来自于原生的Ja