有时候我们在书写jquery的时候，为了书写代码方便，往往忽略了程序执行过程中，给客户端带来的压力。随之而来的就是在某些低端浏览器或者低端电脑上运行速度缓慢，甚至无法运行等问题。
因此我们有必要对我们自己书写的jquery代码进行优化，以达到更快捷、更流畅的运行效果。
jquery性能优化高级技巧，下面主要从七个方面对jquery性能优化做介绍：
1.通过cdn（content delivery network）引入jquery库
2.减少dom操作
3.适当使用原生js
4.选择器优化
5.缓存jquery对象
6.定义一个可以复用的函数
7.用数组方式来遍历jquery 对象集合
下面详解每一个方法的具体说明:
通过cdn（content delivery network）引入jquery库
要提升网站中javascript的性能的最简单的一步就是引入最新版本的jquery库，新发布的版本通常在性能上会有更好的提升而且也修复了一下bug。或者通过cdn引入也是很好的选择,通过cdn引入能够减少网站的加载时间。
以下是一些cdn服务：
一些国内的cdn服务：
http://www.bootcdn.cn/jquery/http://www.bootcdn.cn/jquery/
减少dom操作
虽然javascript性能上有了很大的提升，但是dom操作还是很耗费资源的，需要减少对dom操作。当在一个页面中插入大量的元素的时候，尤其重要。
例如：
// 不好的方式//var elem = $('#elem');//for(var i = 0; i < 100; i++){// elem.append('element '+i+'');//}// 好的方式var elem = $('#elem' ),arr = [];for(var i = 0; i < 100; i++){arr. push('element ' +i+'' );}elem. append(arr. join('' ));
将所有的元素缓存起来一次插入性能上会有所提升，因为只触发页面一次重绘。对于css样式属性也是同样的道理。
更多阅读： 前端页面卡顿？可能是dom操作惹的祸，你需要优化代码
适当使用原生js
创建jquery对象会带来一些开销。所以，如果比较注重性能的话，尽可能使用原生的javascript。在某些方面可能会更容易理解和写更少的代码。例如：
// 打印list中的li的id$('#colors li' ). each(function(){//将$(this).attr('id')方法替换为直接通过id属性访问console. log(this. id);})
选择器优化
如果你需要更好的性能，但是仍然要用到jquery，你可以在jquery选择器优化做一些尝试。以下是一个测试程序，通过浏览器的控制台console.time 和console.timeend 方法来记录不同选择器执行时间。
html:
js://测试程序var iterations = 10000, i;//--------------------------------------------//case 1: 很慢console.time('fancy');for (i = 0; i < iterations; i++) { $('#peanutbutter div:first');}console.timeend('fancy');//--------------------------------------------//case 2: 比较好，但仍然很慢console.time('parent-child');for (i = 0; i < iterations; i++) { $('#peanutbutter div');}console.timeend('parent-child');//--------------------------------------------//case 3: 一些浏览器会比较快console.time('parent-child by class');for (i = 0; i < iterations; i++) { // 通过后代class选择器 $('#peanutbutter .jellytime');}console.timeend('parent-child by class');//--------------------------------------------//case 4: 更好的方式 console.time('by class name');21for (i = 0; i < iterations; i++) { // 直接通过class选择器 $('.jellytime');}console.timeend('by class name');//--------------------------------------------//case 5: 推荐的方式 id选择器console.time('by id');for (i = 0; i < iterations; i++) { $('#jelly');}console.timeend('by id');
执行结果：
缓存jquery对象
每次通过选择器构建一个新的jquery对象时，jquery的核心部分的sizzle引擎会遍历dom然后通过对应的选择器来匹配真正的dom元素。这种方式比较低效，在现代浏览器中可以通过document.queryselector方法通过传入对应的class参数来匹配对应的元素，不过ie8以下版本不支持此方法。一个提高性能的实践是通过变量缓存jquery对象。例如：
first second third fourth fifth
js：
// 不好的方式:// $('#pancakes li').eq(0).remove();// $('#pancakes li').eq(1).remove();// $('#pancakes li').eq(2).remove();// ------------------------------------// 推荐的方式:var pancakes = $('#pancakes li');pancakes.eq(0).remove();pancakes.eq(1).remove();pancakes.eq(2).remove();// ------------------------------------// 或者:// pancakes.eq(0).remove().end()// .eq(1).remove().end()// .eq(2).remove().end();
定义一个可以复用的函数
直接上例子：
html：show menu!show menu!
js：
//bad: //这个会导致多个回调函数的副本占用内存$('#menubutton, #menulink' ). click(function(){// ...});//----------------------------------------------//betterfunction showmenu(){alert('showing menu!' );// doing something complex here}$('#menubutton' ). click(showmenu);$('#menulink' ). click(showmenu);
如果定义一个内联(inline)回调函数同时这个包含多个元素的jquery对象（正如上面所说的第一个例子），对于这个集合中的每个元素都会在内存中保存一个回调函数的副本。
用数组方式来遍历jquery 对象集合
你或许没有注意到，但是在性能方面，对于jquery each方法这种优雅实现是有代价的。有一个办法能够更快地遍历一个jquery对象。就是通过数组来实现，jquery对象集合就是一个类数组，具有length和value属性。可以通过程序来测试一下性能：
html:
item item item item item item item item item
js:
var arr = $('li'), iterations = 100000;//------------------------------// array实现： console.time('native loop');for (var z = 0; z < iterations; z++) { var length = arr.length; for (var i = 0; i < length; i++) { arr[i]; }}console.timeend('native loop');//------------------------------// each实现： console.time('jquery each');for (z = 0; z < iterations; z++) { arr.each(function(i, val) { this; });}console.timeend('jquery each');
结果：
可以看到通过数组实现方式遍历，执行效率更高。
//-------------------------------------------------------持续更新...
以上是一些搜集知识的总结，如有任何建议或疑问，欢迎留言讨论。